Introduction of CSS Combinators in Hindi
इस tutorial मे हम CSS Combinators in hindi के बारे मे detail मे जानेंगे। अभी तक आप selector के बारे मे जान गए है और आप selector का use भी कर चुके है। लेकिन अभी तक आपने सिर्फ single selector का ही use किया है।
single selector का use करके आप किसी भी element को design कर सकते है। लेकिन कई बार element किसी ऐसी position पर होता है की आप single selector के द्वारा उसे target नहीं कर सकते है।
उदाहरण के लिए मान लीजिये की div के अंदर एक paragraph है और आप उस paragraph को design करना चाहते है। इसके लिए आप single paragraph selector का use करते है लेकिन ऐसा करने से आप webpage के सभी paragraph पर वह style apply हो जाएगा।
ऐसे मे आप div और paragraph selector को combinator के द्वारा combine करके आप उस div के अंदर के paragraph को target कर सकते है। आप id या class की मदद से भी उस particular selector को target कर सकते है।
CSS Combinator दो selector के बीच मे relation define करता है। इन्हे दो selector के बीच मे special symbol के रूप मे define किया जाता है। CSS मे चार तरह के Combinators available है।
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
descendant selector (space)
यह Combinator का सबसे अधिक use होता है। Descendant selector अपने parent tag के सभी child को target करने के लिए use किया जाता है। फिर वो child tag अपने parent tag के कितने भी अंदर हो फिर भी उसे target किया जा सकता है।
उदाहरण
<html>
<head>
<style>
.Div1 p
{
color : blue;
}
</style>
</head>
<body>
<h3>CSS Combinators in Hindi</h3>
<div class="Div1">
<P>यह paragraph-1 div के अंदर है।</P>
<P>यह paragraph-2 div के अंदर है।</P>
</div>
<p>यह paragraph-3 div के बाहर है</p>
</body>
</html>यहा उदाहरण मे सिर्फ div के अंदर के p tag का ही color change हुआ है।
child selector (>)
child selector की मदद से आप किसी parent tag के immediate सभी child को target कर सकते है।
उदाहरण
<html>
<head>
<style>
div > p {
background-color: orange;
}
</style>
</head>
<body>
<h3>CSS Combinators in Hindi - Child Selector</h3>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>यहा इस उदाहरण मे हमने child selector की मदद से div के अदर के p tag को target किया है यहा हम इसकी मदद से section tag के अंदर के <p> tag को target नहीं कर सकते है।
Adjacent sibling selector (+)
Adjacent Sibling Selector किसी HTML tag के adjacent siblings को select करने के लिए use किया जाता है। यहा दोनों elements के बीच मे “+” symbol का use होता है।
जब दो elements एक दूसरे के पहले या बाद मे आते है मतलब की एक दूसरे से सटे हुए रहते है तब वो elements adjacent कहलाते है।
जब भी कोई दो elements का parent element same होता है तो वह sibling कहलाते है। उदाहरण के लिए <body> tag के अंदर define किए गए <p>, <table> और <div> आदि elements siblings होते है।
Adjacent Sibling Selector ऐसे element को select करता है जो specify किए गए elements से सटा हुआ है और उसके parent भी same हो मतलब की दोनों element sibling हो।
<html>
<head>
<style>
div + p {
background-color: orange;
}
</style>
</head>
<body>
<h3>CSS Combinators in Hindi-Adjacent Sibling Selector</h3>
<div>
<p>Paragraph-1 in the div.</p>
<p>Paragraph-2 in the div.</p>
</div>
<p>Paragraph-3. After a div.</p>
<p>Paragraph-4. After a div.</p>
<div>
<p>Paragraph-5 in the div.</p>
<p>Paragraph-6 in the div.</p>
</div>
<p>Paragraph-7. After a div.</p>
<p>Paragraph-8. After a div.</p>
</body>
</html>यहा उदाहरण मे हमे <div> tag के तुरंत बाद आने वाला <p> tag को style करना है तो Adjacent Sibling Selector की मदद से कर सकते है।
General Sibling Selector (~)
General sibling selector ऐसे सभी elements को select करता है जो specify किए गये element के siblings है यानि की उसका parent same हो। यहा दोनों elements के बीच मे “~” symbol का use होता है।
<html>
<head>
<style>
div ~ p {
background-color: orange;
}
</style>
</head>
<body>
<h3>CSS Combinators in Hindi-General Sibling Selector</h3>
<p>Paragraph-1.</p>
<div>
<p>Paragraph-2.</p>
</div>
<p>Paragraph-3.</p>
<h5>Some code.</h5>
<p>Paragraph-4.</p>
</body>
</html>यहा उदाहरण मे <div> tag के बाद आने वाले सारे <p> tag general siblings कहलाते है।