CSS Selectors In Hindi Part 1

CSS Selectors In Hindi :-

दोस्तों अगर आपको अपनीं वेबसाइट पर पर control चाहिए तो आपको शुरू से वेबसाइट की शुरूवात करनीं होगी जिससे आपकी वेबसाइट हल्की और फ़ास्ट होनें के साथ उस पर आपका control भी पूरा होगा |

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

इन सब बातों के बिच एक अच्छी बात यह है की इन भाषाओं को सीखना आसान है और आप CSS Selector से शुरूवात कर सकते हैं |

दोस्तों जब तक हमें पानीं की गहराई का पता नहिं होगा तब तक हम उस पानीं में नहिं कूद सकते हैं क्योंकि हमें नहिं पता की पानीं कितना गहरा है , उसी प्रकार CSS सीखनें से पहले हमें पता होना चाहिए की CSS क्या है और CSS Selectors कैसे काम करते हैं,

इसलिए आज हम CSS Selectors In Hindi के इस आर्टिकल में जानेंगें CSS Selectors कितनें प्रकार के होते हैं और कोन कोनसे होते हैं आदि |

जिनको नही पता है CSS Selectors क्या है उनको पहले CSS Selectors की थोड़ी description पढ़ लेनी चाहिए जिससे CSS को समझनें में आसानीं होगी |

CSS Selectors In Hindi

short में बात करें तो, CSS Selectors HTML के elements को select करता है जिन पर आपको css करनीं है | HTML elements के बारे में जानने के लिए यहाँ क्लिक करें – What is HTML Element in Hindi

CSS selectors को 5 categories में divide किया गया है –

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

Simple Selectors

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

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
3 – HTML में tabs कैसे बनाएँ

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 पर जुड़ सकते हैं |

धन्यवाद