CSS Selector क्या है और इसका use कैसे किया जाता है?

जब हम किसी वेब पेज के लिए css rules लिखते हैं तो हमें हर divisions और elements को select करना होता है। ये सब हम CSS selector के माध्यम से करते हैं। इस lesson मे हम इस विषय पर विस्तार से बताने वाले है। CSS सीखने के लिए सबसे पहले आपको इसकी पूरी जानकारी सही-सही पता होनी चाहिए।
एक html document के बहुत से अलग-अलग पार्ट होते हैं। अलग अलग parts के लिए css में भी अलग-अलग rules को डिफाइन किया जाता है।

CSS Selector क्या होता है ?

इसमें किसी element या tag को select करके उसके लिए style rule को लिखा जाता है। एक html वेब पेज में हर चीज का अपना एक स्टाइल by default होता ही है। उदाहरण के लिए यदि आप html document मे <p> टैग का use करते हो तो वो by default ब्लैक कलर मे ही दिखाई देगा।
पर यदि आप css मे <p> को select करके rules लिख देते हो तो फिर वो पैराग्राफ css rules के हिसाब से ही दिखाई देगा। CSS में आपका <p> पर पूरा control होता है । इसको कहाँ दिखाना है कैसा दिखाना है ये सब आप rules में define कर सकते हो।
बिना किसी को सिलेक्ट किये आप css का use नहीं कर सकते हो। किसको को कैसे select करना है वो सब जानकारी css selector मे होती है।
Categories of CSS Selectors
इसको मुख्य रूप से 5 categories मे बांटा जा सकता है जो इस प्रकार हैं:-

1. Simple selectors
2. Combinator selectores
3. Pseudo-class selectors
4. Pseudo-elements selectors
5. Attribute selectors

1. Simple selectors

इसमें elements को उसके नाम, id या class से select करके rules define किये जाते हैं।

Learn CSS In Hindi-CSS सीखें हिन्दी में

3 ways to insert CSS-किसी webpage में CSS कैसे Add करें

What is CSS in Hindi-CSS क्या है और इसके क्या फायदे हैं?

CSS Outline Property का Use कैसे करें- हिन्दी में जानकारी

2. Combinator selectores

ये selectors के बीच के relationship को बताने के लिए प्रयोग किया जाता है। जब किसी selector में एक से ज्यादा simpal selectors होते हैं तो हम simple selectors के बीच में combinator को add कर देते हैं।
CSS में 4 combinators का प्रयोग किये जाते हैं:-
(a)descendant selector(space ) – इसमें दो elements के बीच relation बताने के लिए space का use किया जाता है। यह उन सभी match करने वाले elenments को select करता है जो एक specified element के वंशज ( descendants ) होते है।
Example :- इस उदाहरण में सभी <p> elements जो <div> के अंदर डिफाइन होंगे वो blue color में show होंगे।
div p{color: blue;}
(b)child selector ( > ) :- ये उन सभी elements को select करता है जो एक specified element के children होते हैं। इस example में उन सभी <p> elements को select किया गया है जो एक <div> elements के children हैं।
Example:-
div > p { color: red;}
इसके अनुसार यदि हम किसी ऐसे <p> element जो <div>के अंदर ही हो, के आगे कुछ अन्य वैल्यू या element को add कर देते है तो वो <div> का child नहीं माना जाएगा। जैसे:

(c) adjacent sibling selector (+)
(d) general sibling selector (~)

3. Pseudo-class selectors

एक element की special state को बताने के लिए इसका प्रयोग किया जाता है। इसको user के हिसाब से स्टाइल दिया हटा है।
For Example
एक element को स्टाइल देने के लाइ जब user उस element पर mouse का cruser ले जाता है।
Visited और unvisited links को अलग-अलग स्टाइल देने के लिए ।
किसी फोकस element को स्टाइल देने के लिए ।
जैसे:-

4. Pseudo-elements selectors

किसी element के किसी विशेष part को select करके स्टाइल करने के लिए इसका प्रयोग किया जाता है।
For Example:-
एक element के first letter या line को स्टाइल देने के लिए।
किसी element के पहले या बाद में content या image को insert करने के लिए।
CSS Syntax
selecter:: pseudo-element{ property: value; }
ये इस प्रकार होता है-
p::first-letter{ color: green;}
इस से किसी पैराग्राफ का पहला अक्षर green कलर मे show होगा।

5. Attribute selectors

एचटीएमएल elements में किसी खास attribute या attribute वैल्यू को style देने के लिए attribute selector का प्रयोग किया जाता है। इस example में <a> element के अंदर जो target attribute को select करके स्टाइल दिया गया है। अगर किसी <a> element में target attribute को add नहीं किया गया है तो उस पर attribute selector का कोई असर नहीं होगा।
जैसे:-

इस css selector के lesson में हमने आपको बताया कि  css के rules को define करने के लिए html elements को किस प्रकार select किया जाता है। आगे के lesson में हम आपको background कलर और border property के बारे मे बताएंगे। Hindi Strock का ये प्रयास है कि आपको आसान भाषा मे css समझाया जाए । फिर भी यदि आपको कोई परेशानी हो रही है या कोई बात समझ नहीं आ रही है तो आप नीचे comment करके पूछ सकते है। आपके comment का जवाब 24 अवर्स मे जरूर दिया जाएगा।