सीएसएस पॉडकास्ट - 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;
}
इस तरह की स्थितियों का समाधान करने के लिए सीएसएस से आपको एलिमेंट चुनने और उन पर नियम लागू करने के बहुत से विकल्प मिलते हैं.
CSS नियम के हिस्से
सीएसएस के काम करने के तरीके और सीएसएस में उनकी भूमिका को समझने के लिए, सीएसएस के नियम के हिस्सों के बारे में जानना ज़रूरी है. सीएसएस नियम, कोड का एक ब्लॉक है. इसमें एक या ज़्यादा सिलेक्टर और एक या ज़्यादा एलान होते हैं.
सीएसएस के इस नियम में, सिलेक्टर .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;
}
यह सीएसएस ऐसे एचटीएमएल एलिमेंट पर नीले रंग का बॉर्डर लागू करेगा जिसमें id का rad हो, जैसे:
<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 के बजाय, 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;
}
ग्रुपिंग सिलेक्टर
सिलेक्टर के लिए यह ज़रूरी नहीं है कि वह सिर्फ़ एक एलिमेंट से मैच करे. कई सिलेक्टर को कॉमा लगाकर अलग करके, उन्हें ग्रुप में बांटा जा सकता है:
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;
}
इस बारे में ज़्यादा जानने के लिए, pseudo-classes मॉड्यूल में जाएं.
बदली हुई पहचान वाला एलिमेंट
सूडो-एलिमेंट, सूडो क्लास से अलग होते हैं, क्योंकि वे प्लैटफ़ॉर्म की स्थिति में जवाब देने के बजाय, ऐसे काम करते हैं जैसे कि वे सीएसएस के साथ कोई नया एलिमेंट जोड़ रहे हों.
सूडो-एलिमेंट भी, सूडो क्लास से अलग होते हैं.
एक कोलन (:) का इस्तेमाल करने के बजाय, हम डबल कोलन (::) का इस्तेमाल करते हैं.
.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;
}
यह स्निपेट उन सभी <strong> एलिमेंट को चुनता है जो सिर्फ़ <p> एलिमेंट के चाइल्ड एलिमेंट होते हैं. इस वजह से ये बार-बार नीले रंग के हो जाते हैं.
इस इफ़ेक्ट को ऊपर के उदाहरण में बेहतर तरीके से दिखाया गया है. इसके लिए,
कॉम्बिनेटर सिलेक्टर, .top div का इस्तेमाल किया गया है.
वह सीएसएस नियम उन <div> एलिमेंट में बाईं पैडिंग जोड़ देता है.
कंबाइंडर बार-बार काम करता है. इसलिए, .top में मौजूद सभी <div> एलिमेंट पर भी वही पैडिंग (जगह) लागू होगी.
इस डेमो के एचटीएमएल पैनल में देखें कि कैसे .top एलिमेंट में कई <div> चाइल्ड एलिमेंट हैं और इनमें <div> चाइल्ड एलिमेंट शामिल हैं.
अगला सिबलिंग कॉम्बिनेशन
अपने सिलेक्टर में + वर्ण का इस्तेमाल करके, ऐसे एलिमेंट को खोजा जा सकता है जो किसी दूसरे एलिमेंट के तुरंत बाद आता है.
स्टैक किए गए एलिमेंट के बीच स्पेस जोड़ने के लिए, सिर्फ़ स्पेस जोड़ने के लिए अगले सिबलिंग कंबाइनेटर का इस्तेमाल करें.
अगर कोई एलिमेंट .top के चाइल्ड एलिमेंट का अगला सिबलिंग हो.
नीचे दिए गए सिलेक्टर का इस्तेमाल करके, .top के सभी चाइल्ड एलिमेंट में मार्जिन जोड़ा जा सकता है:
.top * {
margin-top: 1em;
}
इसमें समस्या यह है कि .top का हर चाइल्ड एलिमेंट चुना जा रहा है. इसलिए, यह नियम बेवजह जगह बना सकता है.
यूनिवर्सल सिलेक्टर के साथ मिले अगले सिबलिंग कॉम्बिनेशन से, न सिर्फ़ यह कंट्रोल किया जा सकता है कि किन एलिमेंट को स्पेस मिले, बल्कि किसी भी एलिमेंट के लिए स्पेस भी लागू किया जा सकता है.
इससे आपको लंबे समय तक काम करने की सुविधा मिलती है, चाहे .top में कौनसे एचटीएमएल एलिमेंट दिखते हों.
बाद में- प्रतिरूप संयोजक
अगला संयोजक अगले प्रतिबल सिलेक्टर से काफ़ी मिलता-जुलता है.
हालांकि, + वर्ण के बजाय,
~ वर्ण का इस्तेमाल करें.
इसमें अंतर यह है कि एक एलिमेंट को एक ही पैरंट वाले अगले एलिमेंट के बजाय, एक ही पैरंट वाले किसी दूसरे एलिमेंट को फ़ॉलो करना होता है.
इसके बाद, कॉम्बिनेशन से जुड़े चेकबॉक्स में कुछ कम दिक्कतें हैं, जो ऊपर दिए गए सैंपल की तरह काम करते हैं. यहां हम कस्टम स्विच का रंग तब बदलते हैं, जब इससे जुड़े चेकबॉक्स में :checked की स्थिति होती है.
चाइल्ड संयोजक
चाइल्ड कॉम्बिनेटर (जिसे सीधे तौर पर डिसेंडेंट भी कहा जाता है)
से, कॉम्बिनेटर सिलेक्टर के साथ होने वाले रीकरेशन पर ज़्यादा कंट्रोल मिलता है.
> वर्ण का इस्तेमाल करने का मतलब है कि आपने कंबिनेटर सिलेक्टर को सिर्फ़ बच्चों को टारगेट करने के लिए लागू किया है.
सिबलिंग सिलेक्टर के पिछले उदाहरण पर ध्यान दें. हर अगले सिबलिंग में स्पेस जोड़ा जाता है, लेकिन अगर उनमें से किसी एक एलिमेंट में बच्चों के रूप में अगले सिबलिंग एलिमेंट भी हैं, तो इस वजह से ग़ैर-ज़रूरी और ज़्यादा स्पेस मिल सकता है.
इस समस्या को दूर करने के लिए, चाइल्ड कॉम्बिनेटर को शामिल करने के लिए अगले सिबलिंग सिलेक्टर को बदलें: > * + *.
यह नियम अब सिर्फ़ .top के बच्चों पर लागू होगा.
कंपाउंड सिलेक्टर
कॉन्टेंट को आसानी से समझने और उसे पढ़ने लायक बनाने के लिए, सिलेक्टर को जोड़ा जा सकता है.
उदाहरण के लिए, .my-class क्लास वाले <a> एलिमेंट को टारगेट करने के लिए, यह लिखें:
a.my-class {
color: red;
}
यह सभी लिंक पर लाल रंग लागू नहीं करेगा
और यह .my-class पर सिर्फ़ लाल रंग को लागू करेगा if यह <a> एलिमेंट पर था.
इस बारे में ज़्यादा जानने के लिए, specificity मॉड्यूल देखें.
आपने जो सीखा है उसकी जांच करें
जटिल सिलेक्टर के बारे में अपनी जानकारी की जांच करें
इनमें से कौनसा निशान, सिलेक्टर कॉमबिनेटर नहीं है?
section.awesome {
border: 1px solid hotpink;
}
ऊपर दिया गया सिलेक्टर, इसका एक उदाहरण है...