What is Selectors & its Types
CSS Selectors बहुत ही महत्वपूर्ण होते है। CSS Selector के द्वारा उस कंटेंट को सिलेक्ट किया जाता है। "सिलेक्टर के CSS Rule Syntax का एक भाग होता है। जो एक एचटीएमएल एलिमेंट, एलिमेंट अट्रीब्यूट हो सकता है"
CSS Selector के विभिन्न प्रकार
सिलेक्टर का प्रयोग कंडीशन के अनुसार किया जाता है CSS में विभिन्न प्रकार के सिलेक्टर होते है। सिलेक्टर के द्वारा Web Masters को Flexibility मिलती है।
1. The Type or Element Selectors
यह एक Particular HTML Element ही होता हैं। इसे Type Selector भी कहा जाता हैं। इसके प्रयोग से CSS Rule को Declare किया जाता है। जो शब्द या शब्दांश से एचटीएमएल एलिमेंट को रिप्रेजेंट किया जाता है उससे ही सिलेक्टर को भी लिखा जाता है।
उदाहरण - p{color:Blue;}
इस Style Rule से Paragraph Element का Color Blue हो जाएगा।
2. The Universal Selectors
जब हम किसी HTML Document में उपलब्ध सभी Elements पर एक ही Style Rule Apply करना चाहते हैं, तब Universal Selectors का प्रयोग किया जाता हैं। Universal Selector को * (Asterisk) से Represent किया जाता हैं।
उदाहरण - *{color:Blue;}
इस Style Rule से एक Document में उपलब्ध सभी Elements का Color Blue हो जाएगा।
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 से शुरू नहीं कर सकते हैं।
उदाहरण - .sunrise {Color:Blue;}
Class को Selector बनाने के लिए पहले कोई नाम देना पडता हैं। फिर उस नाम का प्रयोग Style Rule Declare करने के लिए करते हैं। जैसे .sunrise से एक Class बनाई हैं। और इसके लिए Style Rule Declare किया हैं। जितने भी Elements की Class .sunrise होगी, उनमें ये Style Apply होगी।
4. The ID Selectors
Class की तरह ही ID भी एक Global Attribute हैं। इसे भी CSS Selector बनाया जा सकता हैं। ID किसी Element की Unique पहचान होती हैं। जो प्रत्येक Element के अलग-अलग Define की जाती हैं। ID Selector को # (Hash) के साथ लिखा जाता हैं।
नोट - ID का नाम भी किसी Number से शुरु नहीं कर सकते हैं।
उदाहरण - #sunrise {Color:Blue;}
(जो Style Rule Declare किया गया हैं। वो sunrise की ID वाले Element पर Apply हो जाएगा।)
5. The Attribute Selectors
Class और ID भी Attribute ही हैं।Attribute Selector में हम किसी Element के Particular Attribute को Selector के लिए चुनते हैं। यह Method अधिकतर Form Element के लिए Use की जाती हैं।
उदाहरण - .sunrise[type="text"]{Color:Blue;}
ये 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 किया जाता हैं।
उदाहरण - mi h {color:blue;}
इस Style Rule द्वारा केवल mi के भीतर आने वाले h Element पर इस Style Rule का प्रभाव पडेगा। इसके अलावा अन्य h Elements पर इसका कोई प्रभाव नही होगा।
7. Child Selectors
इसे भी Sub-selector की तरह समझ सकते हैं। एक Child Selector पर CSS Apply करने के लिए पहले Parent Selector को लिखा जाता हैं। इसके बाद Space देकर < Greater Than का चिन्ह लगाया जाता हैंं। फिर के स्पेस देकर Child Selector को लिखा जाता हैं और CSS Rule को Declare कर दिया जाता हैं।
उदाहरण - link > p {color:blue;}
इस Style Rule का असर प्रभाव उन Paragraph Element पर होगा जो Direct Link 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 करते हैं।
उदाहरण - sunrise {color:blue; font-weight:bold; text-align:center;}
एक से ज्यादा CSS Declarations को Semi-colon (;) द्वारा अलग किया जाता हैं। यहाँ कितने भी CSS Rule Declare कर सकते हैं।
Selectors को Grouping करना
एक ही CSS Style को एक से ज्यादा Elements पर Apply करना चाहते हैं। तो हम प्रत्येक Element के लिए अलग-अलग CSS Rules को Declare करेंगे। CSS की Grouping के द्वारा हम एक Style को अनेक Elements के लिए Declare कर सकते हैं।
उदाहरण - h1, a, b {color:blue; font-weight:bold; text-align:center;}
CSS में Heading, Anchor और Bold Element पर बराबर रूप से Apply होगी। Selectors को Group करने के लिए Comma (,) द्वारा अलग किया जाता हैं और आखिरी Selector के बाद कोमा को नही लिखा जाता हैं। इसी तरह किसी भी प्रकार के Selector की Grouping कर सकते हैंं।
<<Prev || Next >>
For Any Doubt Clear on Telegram Discussion Group
Join Us On Social Media
For Any Query @8604799387
