What is CSS selectors in Hindi? Css Selectors क्या हैं?
web development के सभी topic Hindi में....
वेब पेज का Html ढांचा तैयार होने के बाद, उसमें रंग भरने सुंदर बनाने के लिए css की जरूरत पड़ती है। Style sheet बनाते समय यह देखना होता है कि कहां-कहां style लगानी है, और उन html टैग को css में कैसे define करना है। उन टैग element को select करके css में लिखा जाता है, उनको select करने का तरीका ही css selector कहलाता है। Css selector ही तय करता है कि जिन टैगों पर style लगनी है, उन्हें कैसे select करके css में उसके लिए styel define करनी है। Css Selectors को Inline css में नहीं define किया जा सकता है।
Html elements के सेलेक्ट करने के तरीकों को यानी Css Selectors को पांच भागों में बांटा गया है-
Simple Selectors
Combinators
Attribute Selectors
Pseudo-class Selectors
Pseudo-elements Selectors
1. Simple Selectors
जैसा कि नाम से ही स्पष्ट है simple selector के। यह ज्यादातर प्रयोग किए जाने वाले web development में selector हैं। यह आसानी से समझे जा सकते हैं। यह निम्नलिखित तरह के होते हैं-
a. Universal selector
b. Element Selector
c. Class Selector
d. Id Selector
e. Selector List
Universal Selector
Universal Selector पूरी body elements के लिए बनाए जाते हैं। यह style पूरी Html body पर apply होती है। उदाहरण के लिए body टैग के लिए selectors पूरी फाइल पर अप्लाई होंगे।
body{
background-color:grey;
}
इसके अलावा browser से default margin और padding हटाने के लिए css selector द्वारा लिखी गई style
* {
margin:0;
padding:0;
}
Element Selector
Element Selector किसी टैग element को select करके उसकी style लिखता है। जैसे पैराग्राफ के Font की size को बढ़ाने के लिए लिखी गई style:
p{
font-size:20px;
}
Class Selector
यह किसी टैग element के attribute के रूप में लिखा जाता है। और उस टैग पर style apply कर देता है। यह सबसे ज्यादा प्रयोग किया जाने वाला selector है। इसे . लगाकर लिखा जाता है। इसे कई टैग के साथ लिखा जा सकता है। जैसे पैराग्राफ के लिए बनाई गई para class.
<p style="para">This is paragraph</p>
इसके लिए selector:
.para{
style:property;
}
Id Selector
यह selector किसी element के साथ specific रूप से प्रयोग होता है। कई class के होने पर, इसे सिर्फ किसी एक टैग के लिए लिखा जाता है। इसे # के साथ लिखा जाता है। जैसे किसी पैराग्राफ के लिए p_id
<p id="p_id">This is paragraph</p>
Id selector:
#p_id{
style:property;
}
Selector List(Grouping Selector)
यह selector कई टैग element को एक साथ select करके लिखने के काम आता है। जैसे h1 और p के लिए एक साथ लिखी गई style।
h1,p{
style:property;
}
2.Combinator Selectors
Css selector एक या एक से अधिक simple selector हो सकता है। Combinator इन्ही simple selectors को आपस में जोड़कर बनाया गया है। यह कई तरीकों में होता है-
a. Descendent Selector
b. Child Selector
c. Adjacent Sibling Selector
d. General Sibling Selector
Descendent Selector
किसी टैग के अंदर लिखे हुए टैग के लिए style लिखने के लिए descendent selector प्रयोग होता है। इसे दोनों टैग के बीच एक space देकर अलग लिखा जाता है। जैसे <div> टैग के अंदर <p> टैग हो, तो <p> टैग के लिए style लिखने के लिए descendent selector
div p{
style:property
}
यह पूरे फाइल में जहां भी div के अंदर p होगा, वहां apply हो जाएगा।
Child Selector
Child selector किसी टैग के अंदर के तुरंत पहले वाले टैग को select करने के लिए होता है। इसे Direct Selector भी कहा जाता है। इसे > के साथ लिखा जाता है। जैसे div के अंदर दो child टैग p और h1 हो, तो p टैग के लिए child selector
div>p{
style:property;
}
Adjacent Sibling Selector
यह लगातार दो टैगों में दूसरे वाले टैग के लिए selector का काम करता है। दोनों टैगों के बीच + साइन होता है। उदाहरणार्थ दो टैग
<h1>This is heading</h1>
<p>this is paragraph</p>
में adjacent sibling selector <p> टैग को select करेगा, कुछ इस तरह से-
h1+p{
style:property;
}
General Sibling Selector
यह selector कई टैगों के एक क्रम में लिखे होने पर, पहले टैग को parent मानकर उसके बाद वाले टैगों को select करने के काम आता है। और इसे ~ से दिखाते हैं। जैसे
<h1> This is first heading</h1>
<h2>this is second heading</h2>
<h3> this is third heading</h3>
अब इसमें पहले वाले टैग को पैरेंट मानकर उसके बाद के किसी भी टैग को टारगेट किया जा सकता है। जैसे तीसरी heading h3 के लिए selector
h1~h3{
style:property;
}
3.Attribute Selectors
यह selector किसी specific attribute वाले element को select करने के लिए होता है। यह दो तरीकों से होता है-
[attribute~="value"] Selector
किसी टैग को select करने के लिए, जिसकी attribute value कोई specific word हो। जैसे किसी फाइल में कई सारे इमेज टैग शामिल हैं, उनमें से वह <img> टैग, जिसके title में flower लिखा हुआ हो, उसे select करके style देना।
[title~="flower"]{
style:property;
}
[attribute|="value"] Selector
यह ऐसी attribute की specific value के द्वारा select करता है, जिसकी value या तो वह specific word हो या specific word के बाद - लगा हो, तब भी वह टैग style के लिए select हो जाएगा। उदाहरण के लिए किसी फाइल में कई सारे input टैग है, जिनकी अलग-अलग id बनी हुई है, उनमें से उस टैग को target करना जिसकी id="user" हो अथवा id="user-name" हो।
[id|="user"]{
style:property;
}
[attribute^="value"] Selector
यह selector उन टैग elements को select करने के लिए है, जिसकी attribute name कोई specific शब्दो हो और उसकी value की शुरुआत specific word से होती हो, न कि पूरी शब्द वही हो। जैसे कि सी फाइल में कई टैग की class के अलग-अलग नाम हैं, जैसे top_section, top_heading, top_margin, तो उन सभी टैग के लिए selector जिनकी class attribute है और value, top है-
[class^="top"]{
background-color:#808080;
}
[attribute$="value"] Selector
यह उन सभी टैग को select करेगा या target करेगा, जिसकी attribute value, last से specified value है। उदाहरण के लिए किसी फाइल में कई <input> टैग हैं, जिनकी कई सारे type हैं, उन सभी में जिनके type में last से "xt" हो, अर्थात् सभी text वाले input टैग का background colour बदलने के लिए selector
[type$="xt"]{
background-color:#202022;
}
[attribute*="value"] Selector
यह selector पिछले selector की तरह ही काम करता है, बस यह आगे से value देखता है। जैसे te से शुरु होने वाले सभी input type।
4. Pseudo-class Selector
Css में कुछ ऐसे selector भी हैं, जो अलग से specific purpose के लिए बनाए गए हैं। क्योंकि ऊपर बताये गये टैग उस काम को नहीं कर सकते। इन्हें : से टैग या क्लास के साथ जोड़ा जाता है। Pseudo class selector कुछ इस प्रकार हैं-
a. hover
जब किसी लिंक के ऊपर या किसी html element के ऊपर ले जाने पर उसमें बदलाव होते हैं, जैसे- उसकी size,colour, background कुछ भी बदले, तो उसमें hover की css लगी होती है। जैसे किसी पैराग्राफ में
p:hover{
`color:blue;`
`font-size: 50px;`
`}`
b. focus
सामान्यतः यह css selector किसी input में काम करता है। जब उस input को select या उस पर कुछ लिखा जाये, तो उसका रंग आदि बदलने के लिए-
input{
background-color:red;
color:blue;
}
c. link
किसी लिंक की styles देने के लिए link selector use होता है।
a:link{
`color:red;`
`font-size: 20px;`
`background-color: yellow;`
`}`
d. visited
visited लिंक को styles देने के लिए यह सेलेक्टर प्रयोग होता है।
a:visited{
`color:green;`
`}`
e. active
जो लिंक open होता है यानी active होता है, उसे select करके style दी जाती है।
a:active{
`color:green;`
`background-color: red;`
`}`
f. first-child
जब किसी parent element के भीतर कई सारे sibling element होते हैं, तो पहले element को select करने के लिए यह selector प्रयोग होता है।
उदाहरण के लिए किसी div में दो पैराग्राफ होने पर, पहले वाले पैराग्राफ के text का colour red करने के लिए
p:first-child{
color: red;
}
g. lang()
जब कई language coding में इस्तेमाल होते हैं, तो यह selector प्रयोग होता है। जैसे किसी पैराग्राफ में French लिखा है, तो french के लिए
p:lang="fr"{
background-color:red;
}
चूंकि हम ज्यादातर अंग्रेजी का प्रयोग करते हैं, तो इसकी जरूरत नहीं पड़ती है।
h. nth-child()
कई सारे element जब एक ही जैसे होते हैं, तो उनमें अपनी आवश्यकतानुसार style देने के लिए यह selector इस्तेमाल होता है। जैसे कई लिंक लगातार होने पर
सम(even) Number वाले लिंक को style देने के लिए
a:nth-child(2n){
`background-color: red;`
`}`
(odd) विषम number वाले लिंक के लिए
a:nth-child(2n+1){
background-color:red;
}
What is Pseudo element in CSS in hindi?
Html के element के specific parts को style देने के लिए CSS ने pseudo element की व्यवस्था की है। इसे :: से जोड़ा जाता है-
::first-line
यह किसी text की पहली लाइन को style देता है। यह सिर्फ block level elements में apply होता है। जैसे किसी पैराग्राफ के पहली लाइन के लिए-
p::first-line{
`color: red;`
`}`
::first-letter
किसी text के first letter को select करने के लिए यह प्रयोग होता है। यह सिर्फ block level elements में apply होता है।
p::first-letter{
`color: red;`
`}`
::before
किसी content के पहले कुछ insert कराने के लिए यह selector प्रयोग होता है। जैसे किसी पैराग्राफ के पहले "ankit" text कराने के लिए -
p::before{
`content: "ankit";`
`color: red;`
`}`
::after
किसी पैराग्राफ में एकदम बाद में कोई text डालने के लिए यह प्रयोग होता है।
::marker
यह selector किसी लिस्ट list में बुलेट्स आदि(marker) को select करने के काम आता है। इससे उसका लिस्ट के बुलेट्स आदि का रंग आदि बदल सकते हैं। जैसे किसी unordered list में
ul li::marker{
`color:red;`
`}`
ordered list:
ol li::marker{
`color:red;`
`}`
::selection
किसी selected item के लिए style देने के लिए यह selector लगाया जाता है।
जैसे एक पैराग्राफ के text को select करने पर-
p::selection{
`background-color: green;`
`color:yellow;`
`}`
