CSS Selectors in Hindi की हिंदी में जानकारी

एक HTML Document के विभिन्न भाग होते हैं. आप एक Simple HTML Document को Header, Body, Sidebar, footer आदि भागों (Divisions) में बांट सकते हैं जब हम किसी Webpage पर CSS Rule को Apply करते हैं तो प्रत्येक Division के अलग-अलग CSS Rule Declare किए जाते हैं. इसके लिए प्रत्येक Division को अलग-अलग Select किया जाता हैं. और Divisions को Select करने के लिए CSS Selectors का उपयोग किया जाता हैं इस Tutorial में हम आपको CSS Selector क्या हैं – What is CSS Selector in Hindi? CSS Selector के विभिन्न प्रकार – Types of CSS Selector? आदि की Basic जानकारी देने वाले हैं. इस Concept को आसानी से समझने के लिए इसे छोटे-छोटे भागों में बांटा गया हैं.

CSS Selectors का परिचय

CSS Selectors बहुत ही महत्वपूर्ण होते हैं. CSS Selectors द्वारा उस Content को Select किया जाता हैं, जिसके लिए हम CSS Rules लिखना चाहते हैं.

Selectors के CSS Rule Syntax का एक भाग होता हैं. जो एक HTML Element, Element Attribute हो सकता हैं. CSS Selectors के बारे में आप पहले भी CSS Syntax Lesson में पढ चुके हैं. आइए अब इसके प्रकार के बारे में जानते हैं.

CSS Selectors के विभिन्न प्रकार

Selectors को परिस्थिति के अनुसार Use किया जाता हैं. इसके लिए CSS विभिन्न प्रकार के Selectors Provide कराती हैं. जिनसे Web Masters को Flexibility मिलती हैं. नीचे आपको Different Types of Selectors के बारे में बताया जा रहा हैं.

1. The Type or Element Selectors

यह एक Particular HTML Element ही होता हैं. इसे Type Selector भी कहा जाता हैं. इसमें आप HTML Element को Selector बनाकर CSS Rule Declare करते हैं. जिस शब्द या शब्दांश से किसी HTML Element को Represent किया जाता हैं. उसी शब्द या शब्दांश से Selector को भी लिखा जाता हैं. नीचे उदाहरण देखिए.

इस Style Rule से Paragraph Element का Color Orange हो जाएगा.

2. The Universal Selectors

जब आप किसी HTML Document में उपलब्ध सभी Elements पर एक ही Style Rule Apply करना चाहते हैं, तब Universal Selectors का इस्तेमाल किया जाता हैं. Universal Selector को * (Asterisk) से Represent किया जाता हैं. नीचे उदाहरण देंखे:

इस Style Rule से एक Document में उपलब्ध सभी Elements का Color Orange हो जाएगा.

Note:- यदि आपने किसी Element के लिए अलग से CSS Rule Declare किया हुआ हैं तो Universal Selector का उस Particular Element पर कोई प्रभाव नही पडेगा.

3. The Class Selectors

Class एक Global Attribute होता हैं. इसे आप CSS Selector के लिए Use कर सकते हैं. आप जिन Elements पर एक Style Rule Apply करना चाहते हैं. उन सभी Elements में Class Attribute द्वारा Class Define की जाती हैं. और इस Class Name के पहले Full Stop Symbol (.) लगाकर CSS Rule को लिखा जाता हैं.

आप एक Class को एक से ज्यादा Elements के लिए Define कर सकते हैं. बस आपको प्रत्येक Element में एक नाम से अलग-अलग Class Define करनी पडेगी. एक बात का ध्यान रखें आप Class Name को Number से शुरू नही कर सकते हैं. नीचे उदाहरण देंखे.

Class को Selector बनाने के लिए पहले कोई नाम देना पडता हैं. फिर उस नाम का इस्तेमाल Style Rule Declare करने के लिए करते हैं. जैसे हमने ऊपर .classname से एक Class बनाई हैं. और इसके लिए Style Rule Declare किया हैं. अब जितने भी Elements की Class .classname होगी. उन पर ये Style Apply होगी.

4. The ID Selectors

Class की तरह ही ID भी एक Global Attribute हैं. इसे भी CSS Selector बनाया जा सकता हैं. ID किसी Element की Unique पहचान होती हैं. जो प्रत्येक Element के अलग-अलग Define की जाती हैं. ID Selector को # (Hash) के साथ लिखा जाता हैं. आप ID का नाम भी किसी Number से शुरु नही कर सकते हैं. नीचे उदाहरण देंखे.

ऊपर जो Style Rule Declare किया गया हैं. वह idname की ID वाले Element पर Apply हो जाएगा.

5. The Attribute Selectors

वैसे Class और ID भी Attribute ही हैं. लेकिन, उन्हे नाम देना पडता हैं. और Attribute Selector में हम किसी Element के Particular Attribute को Selector के लिए चुनते हैं. यह Method अधिकतर Form Element के लिए Use की जाती हैं.

ऊपर दिया गया CSS Rule केवल उस type Attribute पर Apply होगा जिसकी Value text होगी. इसके अलावा ये किसी अन्य type Attribute पर Apply नही होगा.

Attribute Selector को कई तरीके से define किया जा सकता हैं. जिनके बारे में नीचे बताया जा रहा हैं.

1. p[lang] – इस तरह lang Attribute वाले सभी Paragraph Element Select हो जाएंगे.
2. p[lang=”hi”] – जिन Paragraph Elements में lang Attribute की Value hi होगी सिर्फ वे ही Select होंगे.
3. p[lang~=”hi”] – जिन Paragraph Element में lang Attribute की Value में hi शब्द होगा वे ही Select होंगे.
4. p[lang│=”en”] – जिन Paragraph Elements में lang Attribute की Value “en” या “en” से शुरु होगी सिर्फ वे ही Select होंगे.

6. Descendant Selectors or Sub-selectors

आप CSS Rule को एक Element के भीतर Define किसी अन्य Element पर भी Apply कर सकते हैं. इस कार्य को Descendant Selector के द्वारा किया जाता हैं. इसे Sub-selector भी कहते हैं. इसके लिए पहले Parent Selector को लिखा जाता हैं, फिर इसके भीतर Define Child Element को एक Space देकर लिखा जाता हैं. फिर CSS Rule को Declare किया जाता हैं. नीचे उदाहरण देंखे.

इस Style Rule द्वारा केवल li के भीतर आने वाले b Element पर इस Style Rule का प्रभाव पडेगा. इसके अलावा अन्य b Elements पर इसका कोई प्रभाव नही होगा.

7. Child Selectors

इसे भी आप Sub-selector की तरह समझ सकते हैं. लेकिन, इसका दूसरा कार्य हैं. एक Child Selector पर CSS Apply करने के लिए पहले Parent Selector को लिखा जाता हैं. इसके बाद Space देकर < Greater Than का चिन्ह लगाया जाता हैं. फिर के स्पेस देकर Child Selector को लिखा जाता हैं. और CSS Rule को Declare कर दिया जाता हैं.

इस Style Rule का असर प्रभाव उन Paragraph Element पर होगा जो Direct Body Element के Child Element हैं. अगर कोई Paragraph अन्य किसी Element के भीतर हैं तो उस Paragraph Element पर इस Style Rule का कोई प्रभाव नही पडेगा.

Multiple Style Rule लिखना

जब किसी Particular Selector के लिए एक से ज्यादा CSS Rule Declare करने पडते हैं तो उस स्थिति को Multiple Style Rule Declare करना कहते हैं. इसमे आप किसी भी Selector के लिए एक साथ Multiple Style Rules Declare करते हैं. नीचे उदाहरण देंखे.

आप एक से ज्यादा CSS Declarations को Semi-colon (;) द्वारा अलग किया जाता हैं. आप यहाँ कितने भी CSS Rule Declare कर सकते हैं.

Selectors को Grouping करना

यदि आप एक ही CSS Style को एक से ज्यादा Elements पर Apply करना चाहते हैं. तो हम प्रत्येक Element के लिए अलग-अलग CSS Rules को Declare करेंगे. लेकिन, CSS की Grouping तकनीक के जरीए हम एक Style को अनेक Elements के लिए Declare कर सकते हैं. नीचे उदाहरण देंखे.

ऊपर दी गई CSS क्रमश: Heading, Anchor और Bold Element पर बराबर रूप से Apply होगी. Selectors को Group करने के लिए Comma (,) द्वारा अलग किया जाता हैं. और अंतिम Selector के बाद कोमा को नही लिखा जाता हैं. आप इसी तरह किसी भी प्रकार के Selector की Grouping कर सकते हैं.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Selectors की पूरी जानकारी दी हैं. आपने जाना कि CSS Selectors क्या होता हैं? CSS Selectors के कितने प्रकार होते हैं? इसके अलावा आपने Multiple Style Rule Declare करना और Selectors को Grouping करना भी आपने सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital