सिलेक्टर

द सीएसएस पॉडकास्ट - 002: सिलेक्टर

अगर आपके पास लेख का पहला पैराग्राफ़ है, जिसे आपको सिर्फ़ बड़ा और लाल रंग में देखना है, तुम यह कैसे करती हो?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

किसी खास एलिमेंट को ढूंढने और सीएसएस नियम को लागू करने के लिए, आपको सीएसएस सिलेक्टर का इस्तेमाल करना होगा. उदाहरण के लिए, इस तरह से.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

सीएसएस आपको एलिमेंट चुनने और उन पर नियम लागू करने के कई विकल्प देता है, पहले से ही, बहुत आसान से लेकर बेहद मुश्किल हो सकते हैं. का इस्तेमाल क्यों करना चाहिए.

सीएसएस नियम के हिस्से

सिलेक्टर के काम करने का तरीका और सीएसएस में उनकी भूमिका को समझने के लिए, सीएसएस नियम के हिस्सों की जानकारी होना ज़रूरी है. सीएसएस नियम, कोड का एक ब्लॉक होता है. जिसमें एक या ज़्यादा सिलेक्टर और एक या एक से ज़्यादा एलान शामिल हैं.

सीएसएस के इस नियम में, चुनने वाला, .my-css-rule है जो पेज पर my-css-rule क्लास वाले सभी एलिमेंट को ढूंढता है. कर्ली ब्रैकेट में तीन एलान होते हैं. एलान, एक प्रॉपर्टी और वैल्यू पेयर होता है, जो सिलेक्टर से मैच करने वाले एलिमेंट पर स्टाइल लागू करता है. सीएसएस के नियम में आपकी पसंद के मुताबिक, कई एलान और सिलेक्टर हो सकते हैं.

आसान सिलेक्टर

सिलेक्टर का सबसे आसान ग्रुप, एचटीएमएल एलिमेंट के साथ-साथ, क्लास, आईडी, और अन्य एट्रिब्यूट जिन्हें एचटीएमएल टैग में जोड़ा जा सकता है.

यूनिवर्सल सिलेक्टर

यूनिवर्सल सिलेक्टर—जिसे वाइल्डकार्ड भी कहा जाता है—किसी भी एलिमेंट से मेल खाता है.

* {
  color: hotpink;
}

इस नियम की वजह से पेज के हर एचटीएमएल एलिमेंट में हॉटपिंक टेक्स्ट हो जाएगा.

टाइप चुनने वाला

टाइप सिलेक्टर किसी एचटीएमएल एलिमेंट से सीधे तौर पर मेल खाता है.

section {
  padding: 2em;
}

इस नियम की वजह से हर <section> एलिमेंट के हर तरफ़ padding में से 2em होंगे.

क्लास चुनने का टूल

किसी एचटीएमएल एलिमेंट में ऐसे एक या एक से ज़्यादा आइटम हो सकते हैं जिनके बारे में class एट्रिब्यूट में बताया गया हो. कॉन्टेंट बनाने क्लास सिलेक्टर ऐसे किसी भी एलिमेंट से मेल खाता है जिस पर वह क्लास लागू की गई है.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

जिस भी एलिमेंट पर क्लास लागू की गई है उसका रंग लाल हो जाएगा:

.my-class {
  color: red;
}

ध्यान दें कि कैसे . सिर्फ़ सीएसएस में मौजूद है, एचटीएमएल में नहीं. ऐसा इसलिए होता है, क्योंकि . वर्ण, सीएसएस की भाषा को क्लास एट्रिब्यूट के सदस्यों से मैच करने का निर्देश देता है. यह सीएसएस में एक सामान्य पैटर्न है. इसमें एक खास वर्ण, या वर्णों के सेट का इस्तेमाल, सिलेक्टर टाइप तय करने के लिए किया जाता है.

.my-class की क्लास वाले किसी एचटीएमएल एलिमेंट को अब भी ऊपर दिए गए सीएसएस नियम से मैच किया जाएगा, भले ही उनकी कई अन्य क्लास हों, जैसे कि:

<div class="my-class another-class some-other-class"></div>

ऐसा इसलिए होता है, क्योंकि सीएसएस ऐसी class एट्रिब्यूट की खोज करता है जिसमें तय की गई क्लास शामिल हो, खोज करने के लिए डिज़ाइन किया गया है.

आईडी चुनने वाला टूल

इस आईडी वैल्यू वाले पेज पर, id एट्रिब्यूट वाला एचटीएमएल एलिमेंट ही सिर्फ़ एक एलिमेंट होना चाहिए. आप ऐसे एलिमेंट चुनते हैं जिनमें आईडी चुनने वाला टूल इस तरह का है:

#rad {
  border: 1px solid blue;
}

यह सीएसएस उस एचटीएमएल एलिमेंट पर नीला बॉर्डर लागू करती है जिसमें rad का id होता है, जैसे:

<div id="rad"></div>

क्लास सिलेक्टर . की तरह, सीएसएस को यह निर्देश देने के लिए # वर्ण का इस्तेमाल करें कि वह id से मेल खाने वाला एलिमेंट ढूंढ रहा है जो उसे फ़ॉलो करता है.

एट्रिब्यूट चुनने वाला

आप ऐसे एलिमेंट खोज सकते हैं जिनमें कोई खास एचटीएमएल एट्रिब्यूट हो, या एचटीएमएल एट्रिब्यूट के लिए कोई वैल्यू तय की गई हो, इसके लिए, एट्रिब्यूट सिलेक्टर का इस्तेमाल करें. सिलेक्टर को स्क्वेयर ब्रैकेट ([ ]) के साथ रैप करके, सीएसएस को एट्रिब्यूट खोजने का निर्देश दें.

[data-type='primary'] {
  color: red;
}

यह सीएसएस ऐसे सभी एलिमेंट को खोजती है जिनमें primary वैल्यू के साथ data-type एट्रिब्यूट हो, जैसे कि:

<div data-type="primary"></div>

data-type की खास वैल्यू को ढूंढने के बजाय, ऐसे एलिमेंट भी ढूंढे जा सकते हैं जिनमें एट्रिब्यूट मौजूद हो. इस बात से कोई फ़र्क़ नहीं पड़ता कि एट्रिब्यूट की वैल्यू क्या है.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

इन दोनों <div> एलिमेंट का टेक्स्ट लाल रंग में होगा.

केस-सेंसिटिव एट्रिब्यूट सिलेक्टर का इस्तेमाल किया जा सकता है अपने एट्रिब्यूट सिलेक्टर में s ऑपरेटर जोड़कर.

[data-type='primary' s] {
  color: red;
}

इसका मतलब है कि अगर किसी एचटीएमएल एलिमेंट में Primary का data-type होता, primary के बजाय, लाल रंग का टेक्स्ट नहीं दिखेगा. केस-इनसेंसिटिविटी (बड़े और छोटे अक्षरों में अंतर) होने की समस्या को हल करने के लिए, i ऑपरेटर का इस्तेमाल किया जा सकता है.

केस ऑपरेटर के साथ-साथ, आपके पास उन ऑपरेटर का ऐक्सेस होता है जो एट्रिब्यूट वैल्यू में स्ट्रिंग के हिस्सों को मैच करते हैं.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

ग्रुप सिलेक्टर

यह ज़रूरी नहीं है कि सिलेक्टर सिर्फ़ एक एलिमेंट से मैच करे. एक से ज़्यादा सिलेक्टर को कॉमा से अलग करके, उनका ग्रुप बनाया जा सकता है:

strong,
em,
.my-class,
[lang] {
  color: red;
}

इस उदाहरण में, <strong> एलिमेंट और <em> एलिमेंट का रंग बदला गया है. इसे .my-class नाम की क्लास और lang एट्रिब्यूट वाले एलिमेंट के लिए भी लागू किया गया है.

देखें कि आपको कितना समझ आया है

आसान सिलेक्टर के बारे में अपनी जानकारी को परखें

* {}

div {}

pseudo-classes और pseudo-elements

सीएसएस ऐसे काम के सिलेक्टर टाइप उपलब्ध कराता है जो किसी खास प्लैटफ़ॉर्म की स्थिति, जैसे, किसी एलिमेंट पर कर्सर घुमाने पर, एलिमेंट के अंदर स्ट्रक्चर या एलिमेंट का कोई हिस्सा.

सूडो-क्लास

एचटीएमएल एलिमेंट खुद को अलग-अलग स्थितियों में पाते हैं, क्योंकि उनसे इंटरैक्ट किया गया है, या उनका कोई चाइल्ड एलिमेंट किसी खास स्थिति में हो.

उदाहरण के लिए, उपयोगकर्ता किसी एचटीएमएल एलिमेंट पर माउस पॉइंटर से कर्सर घुमा सकता है या उपयोगकर्ता किसी चाइल्ड एलिमेंट पर भी कर्सर घुमा सकता है. ऐसी स्थितियों के लिए, :hover pseudo-class का इस्तेमाल करें.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

pseudo-classes मॉड्यूल में ज़्यादा जानकारी पाएं.

सूडो-एलिमेंट

बदली हुई पहचान वाले एलिमेंट, pseudo-classes से अलग होते हैं. इसकी वजह यह है कि ये एलिमेंट, प्लैटफ़ॉर्म की स्थिति के मुताबिक नहीं होते, वे ऐसे काम करते हैं, जैसे कि वे सीएसएस के साथ कोई नया एलिमेंट शामिल कर रहे हैं. सूडो-एलिमेंट, वाक्यात्मक रूप से pseudo-classes से अलग होते हैं. ऐसा इसलिए, क्योंकि एक कोलन (:) का इस्तेमाल करने के बजाय, हम डबल कोलन (::) का इस्तेमाल करते हैं.

.my-element::before {
  content: 'Prefix - ';
}

जैसा कि ऊपर दिए गए डेमो में दिखाया गया है, वहां आपने लिंक के लेबल के आगे फ़ाइल का टाइप लगाया था, किसी एलिमेंट की शुरुआत में कॉन्टेंट शामिल करने के लिए, ::before pseudo-element का इस्तेमाल किया जा सकता है, या एलिमेंट के आखिर में कॉन्टेंट शामिल करने के लिए, ::after pseudo-element का इस्तेमाल करें.

हालांकि, बदली हुई पहचान वाले एलिमेंट का इस्तेमाल, सिर्फ़ कॉन्टेंट डालने के लिए नहीं किया जा सकता. इनका इस्तेमाल, किसी एलिमेंट के खास हिस्सों को टारगेट करने के लिए भी किया जा सकता है. उदाहरण के लिए, मान लें कि आपके पास एक सूची है. सूची में हर बुलेट पॉइंट (या संख्या) को स्टाइल देने के लिए ::marker का इस्तेमाल करें

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

किसी उपयोगकर्ता के हाइलाइट किए गए कॉन्टेंट को स्टाइल देने के लिए भी ::selection का इस्तेमाल किया जा सकता है.

::selection {
  background: black;
  color: white;
}

pseudo-elements पर मॉड्यूल में ज़्यादा जानें.

देखें कि आपको कितना समझ आया है

सूडो सिलेक्टर के बारे में अपनी जानकारी को परखें

p:hover {
  background: white;
  color: black;
}

कॉम्प्लेक्स सिलेक्टर

आपने पहले से ही बहुत सारे सिलेक्टर देख लिया है. हालांकि, कभी-कभी आपको अपनी सीएसएस का ज़्यादा कंट्रोल चाहिए. यहीं पर मुश्किल सिलेक्टर की मदद ली जाती है.

इस बात पर ध्यान देना मायने रखता है कि हालांकि, नीचे दिए गए सिलेक्टर हमें ज़्यादा ताकत देते हैं, हम चाइल्ड एलिमेंट को चुनकर, सिर्फ़ नीचे की ओर कैस्केड कर सकते हैं. हम ऊपर की ओर लक्षित करने और पैरंट एलिमेंट को चुनने में असमर्थ हैं. हम जानते हैं कि यह झरना क्या है और यह कैसे काम करता है बाद के लेसन में.

कंबाइनेटर

दो सिलेक्टर के बीच जो स्पेस होता है उसे कॉम्बिनेटर कहते हैं. उदाहरण के लिए, अगर सिलेक्टर p > strong था, तो कंबाइनर > वर्ण होगा. इन कॉम्बिनेशन का इस्तेमाल करने वाले सिलेक्टर, दस्तावेज़ में आइटम की जगह के आधार पर उन्हें चुनने में आपकी मदद करते हैं.

डिसेंडेंट कंबाइनेटर

डिसेंडेंट कॉम्बिनेटर को समझने के लिए, आपको पहले पैरंट और चाइल्ड एलिमेंट को समझना होगा.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

पैरंट एलिमेंट <p> है, जिसमें टेक्स्ट होता है. उस <p> एलिमेंट के अंदर एक <strong> एलिमेंट है, जो उसके कॉन्टेंट को बोल्ड करता है. यह <p> के अंदर है, इसलिए यह एक चाइल्ड एलिमेंट है.

डिसेंडेंट कॉम्बिनेटर, हमें चाइल्ड एलिमेंट को टारगेट करने की अनुमति देता है. यह स्पेस () का इस्तेमाल करके, ब्राउज़र को चाइल्ड एलिमेंट खोजने का निर्देश देता है:

p strong {
  color: blue;
}

यह स्निपेट सभी <strong> एलिमेंट चुनता है जो सिर्फ़ <p> एलिमेंट के चाइल्ड एलिमेंट हैं, जो उन्हें बार-बार नीला बनाते हैं.

यह प्रभाव ऊपर दिए गए उदाहरण में बेहतर दिखता है, संयोजक सिलेक्टर .top div का इस्तेमाल करके. यह सीएसएस नियम, उन <div> एलिमेंट में बाईं ओर की पैडिंग (जगह) जोड़ता है. क्योंकि संयोजक बार-बार होने वाला होता है, .top में मौजूद सभी <div> एलिमेंट पर समान पैडिंग (जगह) लागू की जाएगी.

इस डेमो में एचटीएमएल पैनल पर एक नज़र डालें यह देखने के लिए कि .top एलिमेंट में किस तरह कई <div> चाइल्ड एलिमेंट हैं, इसमें <div> चाइल्ड एलिमेंट हैं.

अगला सिबलिंग कॉम्बिनेशन

आप ऐसे एलिमेंट को खोज सकते हैं जो किसी दूसरे एलिमेंट के तुरंत बाद आता है इसे चुनने के लिए, सिलेक्टर में + वर्ण का इस्तेमाल करें.

स्टैक किए गए एलिमेंट के बीच स्पेस जोड़ने के लिए, जगह जोड़ने के लिए अगले सिबलिंग कॉम्बिनेटर का इस्तेमाल करें सिर्फ़ तब, जब कोई एलिमेंट .top के चाइल्ड एलिमेंट का अगला सिबलिंग हो.

.top के सभी चाइल्ड एलिमेंट में मार्जिन जोड़ा जा सकता है, नीचे दिए गए सिलेक्टर का इस्तेमाल करें:

.top * {
  margin-top: 1em;
}

इसमें समस्या यह है कि .top के हर चाइल्ड एलिमेंट को चुना जा रहा है, इस नियम से ग़ैर-ज़रूरी जगह खाली हो सकती है. अगला सिबलिंग कॉम्बिनेटर, इसमें यूनिवर्सल सिलेक्टर का इस्तेमाल करके, न सिर्फ़ यह कंट्रोल किया जा सकता है कि किन एलिमेंट को स्पेस मिलेगा, किसी भी एलिमेंट में स्पेस भी लागू करें. इससे आपको लंबे समय तक अपने हिसाब से सुविधाएं मिलती हैं, यह इस बात पर ध्यान दिए बिना कि .top में कौनसे एचटीएमएल एलिमेंट दिखते हैं.

बाद वाला- सिबलिंग कॉम्बिनेटर

इसके बाद का कॉम्बिनेशन, अगले सिबलिंग सिलेक्टर की तरह काफ़ी मिलता-जुलता है. + वर्ण के बजाय, ~ वर्ण का इस्तेमाल करें. यह कैसे अलग है कि एक एलिमेंट को एक ही पैरंट वाले किसी दूसरे एलिमेंट के बाद, किसी दूसरे एलिमेंट को फ़ॉलो करना पड़ता है, होना ज़रूरी है.

यह बाद वाला कॉम्बिनेशन है, जिसे प्रोसेस करने में थोड़ी आसानी होती है. जो ऊपर दिए गए सैंपल की तरह ही काम के है. जहां हम किसी कस्टम स्विच से जुड़े चेकबॉक्स में :checked स्थिति होने पर उसका रंग बदलते हैं.

चाइल्ड कंबाइनेटर

चाइल्ड कॉम्बिनेटर (जिसे डायरेक्ट डिसेंडेंट भी कहा जाता है) इससे आपको कॉम्बिनेटर सिलेक्टर से होने वाले रिकर्शन पर ज़्यादा कंट्रोल मिलता है. > वर्ण का इस्तेमाल करके, कॉम्बिनेटर सिलेक्टर को सिर्फ़ बच्चों को निर्देश देने के लिए लागू किया जा सकता है.

सिबलिंग सिलेक्टर के पिछले और अगले उदाहरण पर विचार करें. स्पेस को हर अगले सिबलिंग में जोड़ दिया जाता है, लेकिन अगर उनमें से किसी एक एलिमेंट में बच्चों के तौर पर अगला सिबलिंग एलिमेंट भी है, इसकी वजह से, अनचाही और अतिरिक्त स्पेस लग सकती हैं.

इस समस्या को कम करने के लिए, चाइल्ड कॉम्बिनेटर को शामिल करने के लिए, अगले सिबलिंग सिलेक्टर को बदलें: > * + *. यह नियम अब सिर्फ़ .top के बच्चों पर लागू होगा.

कंपाउंड सिलेक्टर

विषय को ज़्यादा सटीक बनाने और उसे आसानी से पढ़ने के लिए, सिलेक्टर को एक साथ जोड़ा जा सकता है. उदाहरण के लिए, <a> एलिमेंट को टारगेट करने के लिए, जिनमें .my-class की क्लास भी है, तो ऐसा लिखें:

a.my-class {
  color: red;
}

ऐसा करने से सभी लिंक पर लाल रंग लागू नहीं होगा साथ ही, .my-class पर लाल रंग सिर्फ़ तब लागू होगा, जब यह <a> एलिमेंट पर होगा. इस बारे में ज़्यादा जानने के लिए, खास जानकारी वाला मॉड्यूल देखें.

देखें कि आपको कितना समझ आया है

मुश्किल सिलेक्टर के बारे में अपनी जानकारी को परखें

section.awesome {
  border: 1px solid hotpink;
}

संसाधन

• सीएसएस सिलेक्टर के बारे में जानकारी
• इंटरैक्टिव सिलेक्टर गेम
• सूडो-क्लास और pseudo-elements रेफ़रंस
• इस टूल की मदद से, सीएसएस सिलेक्टर को अंग्रेज़ी के आसान वाक्यों के बारे में जानकारी दी जाती है