CSS Combinators in Hindi
CSS में combinators के जरिये दो selectors के बिच relationship बनाने में इस्तेमाल किआ जाता है | Selectors के बिच combinator एक सिंबल के जरिये लिखा जाता है |
combinators selectors 4 तरह के होतें हैं
1) descendant selector(space)
2) child selector(>)
3) adjacent sibling selector(+)
4) general sibling selector(~)
1) Descendant Selectors (separated by space)
Descendant Selectors से tag के साथ उसकी सारी child tag मैप किआ जाता है, style देने के लिए | जितने भी child tag हो सबको एक साथ एक तरह का style देने के लिए, descendant selectors का इस्तेमाल होता है |
descendant selectors में दो selectors को space सिंबल देकर लिखा जाता है |
चाहे वो immediate child हो या indirect child हो, css style सारे child tags पे लागु होंगे |
जैसे एक div tag के अंदर कई सारे paragraph है | तो हमे सबको एक तरह के css रूल देना है | तो हम descendant selector का इस्तेमाल करेंगें |
उदाहरण:
<!Doctype html>
<html>
<head>
<title>Combinator Selector</title>
<style>
div p{
color:green;
}
</style>
</head>
<body>
<div class="div1">
<p>this is first paragraph</p>
<p>this is second paragraph</p>
<div class="div2">
<p>this is third paragraph</p>
<p>this is fourth paragraph</p>
</div>
</div>
</body>
</html>
output:
ऊपर के descendant selector के उदाहरण में div p{ color:green; } के जरिये, जितने भी <p> टैग हैं, सबका कलर ग्रीन हुआ | वो पैराग्राफ के कलर भी ग्रीन हुए जो div1 class के अंदर थे, और वो भी जो div2 class के अंदर के पैराग्राफ थे | इसीलिए direct या indirect child हो सब पर css style लागु हुआ |
descendant selectors से आप सारे child tag को एक साथ, एक जैसा style दे सकतें हैं |
2) Child Selector(>)
Parent Element के जो direct child होतें हैं, उन्ही टैग को style देने के लिए Child Selector का इस्तेमाल होता है | > (greater than) सिंबल से दो selector को अलग किआ जाता है |
उदाहरण:
div.div1 > p{ color:green; }
इस उदाहरण में जो <p> tag div1 class के अंदर थे उन्ही का कलर ग्रीन होगा | और बाकि <p> जो div1 के direct child नहीं है, उनके कलर नहीं बदलेंगे |
परिणाम:
3) adjacent sibling selector(+)
एक element के तुरंत बाद वाले element को style करने के लिए adjacent sibling selector का इस्तेमाल होता है | इसमें दोनों selector को +(plus) सिंबल से जोड़ कर लिखा जाता है | मतलब एक टैग बाद जो तुरंत बाद वाला टैग होगा उसे adjacent sibling कहा जायेगा |
निचे हम उदाहरण में देखिये, <h1> tag के बाद कई सारे <p> tags हैं | पर <h1> के तुरंत बाद वाला <p> पे style करना है तो adjacent sibling selector का इस्तेमाल करेंगे |
उदाहरण:
<!Doctype html>
<html>
<head>
<title>Combinator Selector</title>
<style>
h1 + p {
color:red;
}
</style>
</head>
<body>
<h1>heading</h1>
<p>this is first paragraph</p>
<p>this is second paragraph</p>
<p>this is third paragraph</p>
<p>this is fourth paragraph</p>
<div>
<p>this is fifth paragraph</p>
</div>
</body>
</html>
output:
4) general sibling selector(~)
एक element के बाद के सारे एक तरह के elements, general sibling कहलायेंगे | ~(tild) सिंबल से दो general sibling selectors जोड़ा जाता है |
ऊपर दिए उदाहरण में <h1> के बाद वाले सारे <p> tags, <h1> के general sibling कहलायेंगे |
उदाहरण:
इस उदाहरण में <h1> tag के बाद वाले सारे <p> tag का कलर red हुआ | सिर्फ last वाला <p> tag <div> tag के अंदर था, तो वो <h1> tag का sibling नहीं कहलायेगा | इसीलिए उसका कलर नहीं बदला |