इस tutorial मे हम जानेंगे की CSS Selectors क्या है? उनके विभिन्न प्रकार क्या है? इन सभी के बारे मे detail मे उदाहरण के साथ समझेंगे।
Introduction of CSS Selector in Hindi
CSS Selectors syntax का एक भाग है। यह basically HTML attributes, HTML Elements होते है। CSS Selectors के द्वारा उन content को select किया जाता है जिस पर हम CSS Rule apply करना चाहते है।
CSS Selectors के प्रकार/ CSS Selector in Hindi
CSS Selectors के विभिन्न प्रकार नीचे दिये गए है।
- Tag selector / Type selector
- Universal selector
- Class Selector
- ID Selector
- Attributes Selector
- Descendant Selector
- Adjacent sibling Selector
- Child Selector
Tag selector / Type selector
Tag selector को Type selector भी कहा जाता है। इससे हम किसी भी HTML tag को select करके उसमे CSS Style apply कर सकते है। यहा हम selector की जगह उस Tag का name लिख देते है जिसकी हमे Style change करनी है।
उदाहरण
<html>
<head>
<style>
input{
background-color:orange;
}
</style>
</head>
<body>
Enter Your Name:<input type="text">
</body>
</html>
Universal selector
जब हमे web page के सारे elements को same rule apply करना चाहते है तब हम Universal selector का इस्तेमाल करते है। Universal selector को * से दर्शाया जाता है और इससे सारे tags को एक साथ select किये जाते है।
उदाहरण
<html>
<head>
<style>
*{
color:orange;
}
</style>
</head>
<body>
<h1>This is heading.</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Class Selector
Class एक Global attribute है। इसका इस्तेमाल सबसे ज्यादा होता है। आप जिस element पर style rule को apply करना चाहते हो तो उस element मे class attribute के द्वारा class को define किया जाता है। और CSS Rule को apply करने के लिये Class name के आगे full stop (.) लगाकर define किया जाता है।
आप यहा अलग अलग elements के लिये same class भी define कर सकते है। बस आपको यह ध्यान रखना है की class name number से शुरू नहीं होना चाहिए।
उदाहरण
<html>
<head>
<style>
.red{
color:red;
}
.black{
color:black;
}
</style>
</head>
<body>
<h1 class= "red">This is heading.</h1>
<p class= "red">This is a paragraph.</p>
<p class= "black">This is another paragraph.</p>
</body>
</html>
ID Selectors
ID भी एक Global attribute है। यह class की तरह ही होता है इसको define करने के लिये dot(.) की जगह hash tag (#) को लगाया जाता है।
ID Selector को सिर्फ एक element के लिये इस्तेमाल किया जाता है। प्रत्येक elements के लिये ID unique होता है। और ID Name number से शुरू नहीं होना चाहिये।
उदाहरण
<html>
<head>
<style>
#para1{
color:red;
}
</style>
</head>
<body>
<h1 id="para1">This is heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Attributes Selector
अब तक हम किसी भी HTML tag को selector बनाते थे। लेकिन हम उस tag के attribute को भी selector बना सकते है। इसके लिए square bracket का इस्तेमाल किया जाता है। यह method ज़्यादातर form element के लिए इस्तेमाल होती है।
उदाहरण
<html>
<head>
<style>
Input[type="text"] {
Background-color: orange;
}
</style>
</head>
<body>
<input type="text">
<input type="submit" value="submit">
</body>
</html>
Descendant Selector
जब एक element के अंदर दूसरा element होता है तब अंदर के element पर style rule apply करने के लिये descendant selector का इस्तेमाल करते है। इसे sub selector भी कहा जाता है
उदाहरण
<html>
<head>
<style>
p b{
color:red;
}
</style>
</head>
<body>
<p>We are learning <b> CSS tutorial in hindi</b></p>
</body>
</html>
Adjacent sibling Selector
जब किसी specific element के just बाद आने वाले दूसरे element मे style rule को apply करना हो तो Adjacent sibling Selector का इस्तेमाल होता है।]
यहा उदाहरण मे p+p लिखा है इसका मतलब है की पहले <p> element के just बाद आने वाला दूसरे और तीसरे <p> element पर style rule apply होगा।
उदाहरण
<html>
<head>
<style>
p+p {
color:red;
}
</style>
</head>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</body>
</html>
Child Selector
यह Descendant Selector की तरह हि होता है। लेकिन किसी भी element के child पर CSS rule को apply करना चाहते हो तो Child Selector का इस्तेमाल करते है। इसमे parent selector के बाद greater than symbol लगाया जाता है और इसके बाद child selector को लिखा जाता है।
उदाहरण
<html>
<head>
<style>
div>b {
color:red;
}
</style>
</head>
<body>
<div>
<b>This is first paragraph.</b>
<p>This is <b> second paragraph.</b></p>
</div>
</body>
</html>
यहा <p> tag के अंदर <b> tag पर style rule apply नहीं होगा क्योकि <b> tag <p> का child है और हमने यहा style rule <div> के child <b> पर apply किया है।
IT NICE WEBSITE BUT GROUPING SELECTORS & HOW TO APPLY MULTIPLE STYLE RULES ARE MISSING.
I HOPE YOU WILL CORRECT IT VERY SOON.
YOU ALSO MISS PSEUDO CLASSES & PSEUDO-ELEMENTS.