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 Selectors आसान भाषा में इसलिए आज के आर्टिकल को शुरू से लेकर अंत तक पढ़ते रहें.

CSS Selectors In Hindi

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 के टाइप देख सकते हैं.

12345
Simple selectorsCombinator selectorsPseudo-class selectorsPseudo-elements selectorsAttribute 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 में चार अलग-अलग कॉम्बिनेटर हैं :-

descendant selector (space)child selector (>)adjacent sibling selector (+)general sibling selector (~)

अलग-अलग 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 देख सकते हैं |

css selectors in hindi

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 देख सकते हैं |

css selectors in hindi

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 देख सकते हैं |

css selector

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

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

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

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

CSS Selector क्या हैं ?

CSS Selector का उपयोग किसी html के element की style करनें के लिए किए जाते हैं | CSS Selector के बिना किसी webpage की style करना मुस्किल है |

CSS Selector का उपयोग उन elements को परिभाषित करने के लिए किया जाता है जिन्हें हम CSS के साथ style करना चाहते हैं। कई अलग-अलग प्रकार के CSS Selector हैं, जिनमें से प्रत्येक का अपना एक अलग सिंटैक्स(शुत्र) है।

CSS Selector कितनें प्रकार के होते हैं ?

CSS में कई अलग-अलग प्रकार के selector हैं और इतनें सारे selector होनें के कारण हम अपनीं वेबसाइट को ज़्यादा fast customize कर सकते हैं इसके अलावा वेबसाइट पर हमारा कंट्रोल भी ज़्यादा हो जाता है |

CSS में कई प्रकार के selector हैं जो आपको नीचे बताए गये हैं,
1 – Simple Selector
2 – Combinators Selector
3 – Pseudo-classes Selector
4 – Pseudo Elements Selector
5 – Attribute Selector Selector

CSS Selector के बिना style करना संभव है या नहीं ?

CSS Selector के बिना किसी webpage को style करना संभव है लेकिन इसके लिए प्रत्येक html टैग में inline CSS करनें की जरूरत है और प्रत्येक element में inline CSS करना टाइम वेस्ट माना जाता है |

CSS Selector के गुण ?

CSS Selector के use से हम किसी भी element को style कर सकते हैं और अगर किसी webpage में एक ही प्रकार के element हैं तो उनकी style एक जगह से कर सकते हैं |

Conclusion

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

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

धन्यवाद…

Leave a Comment