CSS Selectors In Hindi Part 1

CSS Selectors In Hindi :- CSS selectors के बिना CSS नहीं की जा सकती है किसी भी वेबसाइट में और बिना CSS के कोई भी वेबसाइट यूजर फ्रेंडली नहीं बन सकती और जो वेबसाइट यूजर के अनुसार नहीं होती है उसका होना और नहीं होना एक बराबर है इसलिए किसी भी वेबसाइट के लिए या किसी भी वेब डिज़ाइनर के लिये CSS का ज्ञान होना ज़रूरी है.

एक अच्छी वेबसाइट बनाने के लिए आपको HTML, CSS, Javascript जैसी भाषाओं का technical ज्ञान होना बहुत ज़रूरी है, क्योंकि HTML के बिना आप वेबसाइट का आधार नहीं बना सकते हैं और CSS के बिना आप style नहीं कर सकते और javascript के बिना वेबसाइट में functionality add नहीं कर सकते इसलिए इस भाषाओं का ज्ञान होना बहूत ज़रूरी है |

इन सब बातों के बिच एक अच्छी बात यह है की इन भाषाओं को सीखना आसान है.

दोस्तों अगर CSS सीखना चाहते हैं तो सबसे पहले आपको CSS Selector का ज्ञान होना ज़रूरी है इसलिए आज के आर्टिकल को शुरू से लेकर अंत तक पढ़ते रहें.

CSS Selectors In Hindi

CSS Selector क्या है ?(What is css selector)

CSS Selector एचटीएमएल के किसी भी एलिमेंट को टारगेट करने उस पर स्टाइल करने का काम करता है.

CSS के selectors के कई प्रकार है जिनसे एचटीएमएल के एलिमेंट को अलग-अलग प्रकार से सेलेक्ट करवाया जा सकता है और उन पर CSS की जा सकती है, नीचे आपको उन सभी प्रकार के बारे में पीढ़ने को मिल जाएगा.

CSS selectors के प्रकार (Types of CSS selectors)

CSS selectors को 5 categories में divide किया गया है जिनकी सहायता से अलग-अलग एलिमेंट को अलग-अलग प्रकार से target किया जा सकता है.

नीचे आप CSS selectors के टाइप देख सकते हैं.

CSS Selectors In Hindi में आगे हम जान लेते हैं की इन category में जो selector हैं वो कैसे काम करते हैं |

Simple Selectors

दोस्तों 1 no पर हमनें रखी है Simple selectors की category, क्योंकि सबसे पहले CSS में आपको simple selectors ही काम आने वाले हैं. Simple selectors में हम html tag का नाम ले सकते हैं या class या फिर id भी ले सकते हैं जैसे –

Element Selector

CSS एलिमेंट सिलेक्टर किसी भी एलिमेंट को उसके नाम के आधार पर स्टाइल करवा सकता है जैसे कि नीचे example में बताया गया है.

div{
    padding: 2rem 1rem;
    background: #000;
}

Class Selector

class selector में आपको HTML element में जाकर class नाम से एक attribute देना होता है कुछ इस प्रकार से <div class=”box”></div> अगर आप इस तरह से attribute देते हैं तो आप simple selector में किसी भी element की class को target कर के उस पर CSS कर सकते हैं जैसे-

.box{
    color: #fff;
    background: #000;
}

उम्मीद है आपको सब समझ आ रहा होगा |

Id Selector

id selector में आपको HTML element में जाकर id नाम से एक attribute देना होता है कुछ इस प्रकार से <div id=”box”></div> अगर आप इस तरह से attribute देते हैं तो आप simple selector में किसी भी element की id को target कर के उस पर CSS कर सकते हैं जैसे-

#box{
    color: #fff;
    background: #000;
}

Note – अगर आप एक element में एक ही नाम से id और एक ही नाम से class देते हैं और उसके इस्तेमाल से CSS करते हैं तो उन दोनों में से जो id selector है उसकी CSS पहले काम करेगी | इसका एक example आप नीचे देख सकते हैं |

#box{
    color: red;
    background: orange;
}
.box{
    color: #fff;
    background: #000;
}

ऊपर बताए गये उदाहरण में आप देख सकते हैं की एक ही नाम से id है ओर एक ही नाम से class है लेकिन इन दोनों में से पहले #box की CSS काम करेगी ना की .box की CSS.

Combinator Selectors

Combinator Selectors, selectors के बिच relation को बताता है | Combinator Selectors में कितनें भी simple selectors हो सकते हैं लेकिन फर्क सिर्फ इतना है की Combinator Selectors के बिच में कुछ character लगाए जाते हैं जिनसे selector के बिच relation का पता लग जाता है |

CSS में चार अलग-अलग कॉम्बिनेटर हैं :-

अलग-अलग selector हमें अलग-अलग तरह से काम करनें की आजादी देता है जैसे की मान लीजिये आपकी simple selector से css work नहिं कर रही है या browser confuse हो रहा है तो आप उस condition में इन selector का use कर सकते हैं, अब हम 1 by 1 उदहारण देख लेते हैं –

Descendant selector (space)

descendant selector (space) को हम simple selector से समझ सकते हैं जिसकी बात हम पहले ही कर चुके हैं |

Child Selector (>)

Child Selector उन सभी element को सलेक्ट करता है जो की एक main element के child है जैसे की आपको नीचे बताया गया है |

<div class="child-selector">
    <p>paragraph-1</p>
    <p>paragraph-2</p>
    <p>paragraph-3</p>
    <p>paragraph-4</p>
    <div class="child-selector-inner">
        <p>paragraph-5</p>
    </div>
    <p>paragraph-6</p>
</div>
<p>paragraph-7</p>

child selector की CSS कुछ इस प्रकार से की जाती है |

body{
    font-family: sans-serif;
}
child-selector > p{
    color: red;
    margin-bottom: 10px;
    font-size: 20px;
}

अब आप इसका output देख सकते हैं |

Adjacent Sibling Selector (+)

adjacent sibling selector का उपयोग उन element को select करने के लिए किया जाता है जो किसी अन्य specific element के बाद होते हैं जैसे की आपको नीचे बताया गया है |

<div class="sibling selector">
    <p>paragraph-1</p>
    <p>paragraph-2</p>
    <p>paragraph-3</p>
    <p>paragraph-4</p>
</div>
<div>
    <p>paragraph-5</p>
    <p>paragraph-6</p>
    <p>paragraph-7</p>
</div>

adjacent sibling selector की CSS कुछ इस प्रकार से की जाती है |

body{
    font-family: sans-serif;
}
.sibling selector + div p{
    color: red;
    margin-bottom: 10px;
    font-size: 20px;
}

अब आप नीचे इसका output देख सकते हैं |

general sibling selector (~)

general sibling selector उन सभी element को सलेक्ट करता है जो किसी specific element के बाहर होते हैं और general sibling selector का इस्तेमाल करने के लिए selector के बिच में टाइल्ड (~) का इस्तेमाल किया जाता है | जैसे कि आपको निचे बताया गया है |

<p>paragraph-1</p>
<span>General Sibling Selector</span>
<p>paragraph-2</p>
<p>paragraph-3</p>
<section>
    <p>paragraph-4</p>
    <p>paragraph-5</p>
    <p>paragraph-6</p>
</section>
<p>paragraph-7</p>
<p>paragraph-8</p>

general sibling selector की CSS कुछ इस प्रकार से की जाती है |

body{
    font-family: sans-serif;
}
span ~ p{
    color: red;
    margin-bottom: 10px;
    font-size: 20px;
}

अब आप नीचे इसका output देख सकते हैं |

उम्मीद है आपनें examples समझे होंगे फिर भी समझ ना आए तो आप मेरा youtube video देख सकते हैं और चैनल subscribe कर सकते हैं |

CSS Selectors In Hindi के आलावा और आर्टिकल हैं जो आपको पढनें चाहिए

1 – CSS के प्रकार
2 – Inline And Block Level Elements

CSS Selectors In Hindi के इस आर्टिकल के अलावा आप official website पर भी चेक कर सकते हैं – CSS Selectors

Conclusion

दोस्तों CSS Selectors In Hindi के आर्टिकल में आपनें CSS Selectors के बारे में पढ़ा है जिनके इस्तेमाल से आपको CSS सिखनें में आसानी होगी |

उम्मीद है दोस्तों CSS Selectors In Hindi के part-1 में बताए गए सभी selectors आपके समझ में आ गए हैं | फिर भी कोई प्रश्न हो तो आप निचे comment कर सकते हैं | और अगर आपको ये आर्टिकल पसंद आया हो तो आप अपने दोस्तों के साथ share कर सकते हैं | ताज़ा update पानें के लिए आप मेरे साथ social media पर जुड़ सकते हैं |

धन्यवाद