CSS in Hindi – Introduction to Combinators

Html and css in hindi
Type of CSS combinators in Hindi
Introduction to CSS combinators in Hindi

Introduction to Combinators

Css मे अभी तक हमने selectors के बारे में जान लिया है | और उन्हे use भी कर चुके है। लेकिन अभी तक आपने सिर्फ selectors को ही use किया है।

Selectors द्वारा आप आसानी से किसी भी tags पर css लिख सकते है | लेकिन कई बार हमारा tag किसी पर्टिकुलर tags के अन्दर आता है | उदाहरण के लिए आप <div> tag के अंदर किसी tags को define कर सकते है | तो उसे single selector के द्वारा target नही किया जा सकता है | इसके लिए हमे combinator का use करना पड़ता है |

CSS मे combinators दो selectors के बीच relationship बनाने के लिए use किया जाता है। selectors के बीच combinator को special symbol के रूप में लिखा जाता है।

आप html elements पर style apply करना चाहते है | तो दोनों selectors को id या class द्वारा target कर सकते है | ताकि web page के सभी tags target ना हो।

CSS में कुल चार तरह के combinators पाए जाते है। इन्हें multiple selectors भी कहा जाता है। क्योंकि combinator एक से अधिक selectors को combine करते है।

1 . ( + ) Adjacent Sibling Selector

2 . ( ~ ) General Sibling Selector

3 . ( Space ) Descendent Selector

4 . ( > ) Child Selector

ऊपर दिये गये blockes मे combinators को देख सकते है |

General Sibling Selector

General sibling selector को हमेसा tilde (~) symbol के रूप में represent किया जाता है। General sibling selector सभी html tags को select करता है जो किसी न किसी tag के siblings है। इस selector का syntax निचे दिया जा रहा है।

<html>
<head>
<style type="text/css">
p ~ span
{
   background-color : red;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph tag</p>
<span>This span is tag and adjacent sibling</span>
</div>
</body>
</html>

Adjacent Sibling Selector

Css मे Adjacent sibling selector किसी html tags का adjacent siblings को select करने के लिए use किया जाता है। adjacent sibling element के बीच में (+) symbol के रूप में use किया जाता है।

कोई भी दो elements adjacent तब कहलाते है | जब वह एक दूसरे के पहले या बाद में आते है। यानी जब दो elements एक दूसरे से सटे हुए रहते है |तो वह adjacent sibling selector कहलाते है। दाहरण के लिए किसी <body> tag के अंदर use किये गए tags <div>, <p>, <h1> आदि elements sibling होते है। अब निचे example दिया जा रहा है |

<html>
<head>
<style>
p+span
{
   background : red;
}
</style>
</head>
<body>
<div id=”Div1”>
<p>This is a paragraph tag</p>
<span>This span is tags</span>
</div>
</body>
</html>

Descendent Selector

इस combinator को सबसे अधिक use किया जाता है। Descendent selector ऐसे tags को target करने के लिए use किया जाता है | जो parent tags के child हो। इस बात से कोई फर्क नहीं पड़ता की वह child tags कितने अन्दर है।

उदाहरण के लिए <div> tag के अंदर यदि एक ordered list बनाई जाए तो ul या li tags को target करने के लिए CSS में div selector के बाद एक space देकर ul या li tags को select करते है। ऐसा करने से ul tags के सभी li tags target हो जाते है।

<html>
 
<head>
<style>
#Div1 li
{
   background : red;
}
</style>
</head>
<body>
<div id=”Div1”>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</body>
</html>

Child Selector

Child selector ऐसे tags को select करने के लिए use किया जाता है | जो parent tags के child होते है। child से यँहा पर तात्पर्य है | ऐसे tags जो उस parent tags के अंदर create किये जाते है |

<div>
<p>This is a paragraph tag</p>
</div>

ऊपर दिये गये code मे <div> एक parent tag है | और <p> tag एक child tag है | अगर आप चाहे तो direct भी <p> tag के ऊपर css apply कर सकते है | लेकिन यहाँ पर child selector के द्वारा भी css apply कर सकते है | अब निचे दिये गये code को देखे |

<html>
<head>
<style>
Div > p
{
    background : green;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph tag</p>
</div>
</body>
</html>

CSS in Hindi – Introduction to Combinators, Type of CSS combinators in Hindi learn by myhindiexam