सिलेक्टर

सीएसएस पॉडकास्ट - 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 क्लास वाले सभी एलिमेंट ढूंढता है. कर्ली ब्रैकेट में तीन एलान हैं. एलान, प्रॉपर्टी और वैल्यू का एक पेयर होता है. यह सेलेक्टर से मैच होने वाले एलिमेंट पर स्टाइल लागू करता है. किसी सीएसएस नियम में, जितने चाहें उतने एलान और सिलेक्टर हो सकते हैं.

सिंपल सिलेक्टर

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

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

Browser Support

• 1
• 12
• 1
• 1

Source

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

* {
  color: hotpink;
}

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

टाइप सिलेक्टर

Browser Support

• 1
• 12
• 1
• 1

Source

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

section {
  padding: 2em;
}

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

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

Browser Support

• 1
• 12
• 1
• 1

Source

किसी एचटीएमएल एलिमेंट के 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 एट्रिब्यूट को ढूंढती है.

ध्यान दें: क्लास एट्रिब्यूट की वैल्यू, आपकी पसंद के मुताबिक कुछ भी हो सकती है. आपको एक बात का ध्यान रखना होगा. किसी क्लास (या आईडी) को .1element जैसे नंबर से शुरू नहीं किया जा सकता. ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन पढ़ें.

आईडी सिलेक्टर

Browser Support

• 1
• 12
• 1
• 1

Source

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

#rad {
  border: 1px solid blue;
}

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

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

क्लास सिलेक्टर . की तरह ही, # वर्ण का इस्तेमाल करके सीएसएस को निर्देश दें कि वह उस एलिमेंट को ढूंढे जो इसके बाद मौजूद id से मैच करता हो.

ध्यान दें: अगर ब्राउज़र को id का एक से ज़्यादा इंस्टेंस मिलता है, तब भी वह अपने सिलेक्टर से मैच होने वाले किसी भी सीएसएस नियम को लागू करेगा. हालांकि, id एट्रिब्यूट वाले किसी भी एलिमेंट की वैल्यू यूनीक होनी चाहिए. इसलिए, जब तक किसी एक एलिमेंट के लिए खास सीएसएस नहीं लिखी जा रही है, तब तक id सिलेक्टर के साथ स्टाइल लागू करने से बचें. ऐसा इसलिए, क्योंकि उन स्टाइल का फिर से इस्तेमाल नहीं किया जा सकता.

एट्रिब्यूट सिलेक्टर

Browser Support

• 1
• 12
• 1
• 3

Source

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

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

यह सीएसएस उन सभी एलिमेंट को ढूंढती है जिनमें data-type एट्रिब्यूट की वैल्यू primary है. जैसे:

<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 के बजाय Primary का data-type है, तो उसे लाल रंग का टेक्स्ट नहीं मिलेगा. 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;
}

इस डेमो में, एट्रिब्यूट सिलेक्टर में मौजूद `$` ऑपरेटर, `href` एट्रिब्यूट से फ़ाइल टाइप का पता लगाता है. इससे, किसी फ़ाइल टाइप के आधार पर, लेबल में प्रीफ़िक्स जोड़ा जा सकता है. इसके लिए, सूडो-एलिमेंट का इस्तेमाल किया जाता है.

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

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

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

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

देखें कि आपको क्या समझ आया

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

* {}

ऊपर दिए गए स्निपेट में किस तरह के सिंपल सिलेक्टर का इस्तेमाल किया गया है?

एट्रिब्यूट

[] का इस्तेमाल, एट्रिब्यूट के आसान सिलेक्टर के लिए किया जाता है.

आईडी

# का इस्तेमाल, आईडी के सिंगल सिलेक्टर के लिए किया जाता है.

सभी के लिए

*, यूनिवर्सल सिंपल सिलेक्टर है.

क्लास

. का इस्तेमाल, क्लास के सिंगल सिलेक्टर के लिए किया जाता है.

div {}

ऊपर दिए गए स्निपेट में किस तरह के सिंपल सिलेक्टर का इस्तेमाल किया गया है?

क्लास

क्लास के आसान सिलेक्टर के लिए, . का इस्तेमाल किया जाता है.

टाइप

टाइप वाले सिलेक्टर के लिए, element नाम का इस्तेमाल किया जाता है.

एट्रिब्यूट

स्क्वेयर ब्रैकेट [] का इस्तेमाल, एट्रिब्यूट के आसान सिलेक्टर के लिए किया जाता है.

आईडी

# का इस्तेमाल, आईडी के आसान सिलेक्टर के लिए किया जाता है.

स्यूडो-क्लास और स्यूडो-एलिमेंट

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

स्यूडो-क्लास

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

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

/* 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;
}

ज़्यादा जानकारी के लिए, स्यूडो-क्लास मॉड्यूल देखें.

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

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

ध्यान दें: डबल कोलन (::) से, स्यूडो-एलिमेंट और स्यूडो-क्लास में अंतर किया जाता है. हालांकि, सीएसएस स्पेसिफ़िकेशन के पुराने वर्शन में यह अंतर नहीं था. इसलिए, ब्राउज़र ओरिजनल स्यूडो-एलिमेंट के लिए सिंगल कोलन का इस्तेमाल करते हैं. जैसे, :before और :after. इससे IE8 जैसे पुराने ब्राउज़र के साथ पिछली पीढ़ी के सिस्टम के साथ काम करने में मदद मिलती है.

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

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

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

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

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

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

स्यूडो-एलिमेंट के बारे में मॉड्यूल में ज़्यादा जानें.

देखें कि आपको क्या समझ आया

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

स्यूडो-एलिमेंट सिलेक्टर में कितने कोलन का इस्तेमाल किया जाता है?

:

एक : का इस्तेमाल, स्यूडो-क्लास को टारगेट करने के लिए किया जाता है.

::

स्यूडो-एलिमेंट को टारगेट करने के लिए, दो :: का इस्तेमाल किया जाता है.

:::

यह अमान्य है और किसी को टारगेट नहीं करता.

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;
}

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

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

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

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

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

सिलेक्टर में + वर्ण का इस्तेमाल करके, किसी एलिमेंट के ठीक बाद मौजूद एलिमेंट को ढूंढा जा सकता है.

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

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

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

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

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

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

सीएसएस स्विच एलिमेंट बनाने के लिए, `:checked` सूडो क्लास के साथ किसी अन्य सिलेक्टर का इस्तेमाल करें.

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

चाइल्ड कॉम्बिनेटर

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

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

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

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

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

a.my-class {
  color: red;
}

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

देखें कि आपको क्या समझ आया

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

इनमें से कौनसा सिंबल, सिलेक्टर कॉम्बिनेटर नहीं है?

>

डायरेक्ट डिससेंडेंट कॉम्बिनेटर.

÷

अमान्य, सीएसएस सिंबल नहीं है.

+

अगला सिबलिंग कॉम्बिनेटर.

*

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

.

क्लास का सिंपल सिलेक्टर.

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

ऊपर दिया गया सिलेक्टर, ...

कॉम्बिनेटर

यह एक सिंबल है, जिसका इस्तेमाल सिलेक्टर को ज़्यादा सटीक सिलेक्टर में जोड़ने के लिए किया जाता है.

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

जब ज़्यादा सटीक सिलेक्टर बनाने के लिए, दो या उससे ज़्यादा सिलेक्टर को कॉम्बिनेटर के बिना एक साथ इस्तेमाल किया जाता है.

Terminator

यह सिलेक्टर टाइप नहीं है, लेकिन ऐसा लगता है कि है, है ना? 🤖

संसाधन

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