CSS चयनकर्ताओं का उपयोग करके वेब पेज का हिस्सा कैसे लक्षित करें

कैस्केडिंग स्टाइल शीट्स (सीएसएस) आपको अपने वेबपृष्ठों का रूप बदलने की अनुमति देती है। फोंट और रंगों से लेकर रिक्ति और समग्र लेआउट तक, सभी प्रकार के डिज़ाइन टूल आपकी उंगलियों पर हैं। यद्यपि सीएसएस अपनी संपूर्णता में एक जटिल भाषा है, लेकिन केवल दो बुनियादी अवधारणाएं हैं जिन्हें आपको शुरू करने के लिए समझने की आवश्यकता है।

यह सब ठीक से पहचानने के साथ शुरू होता है कि आप किस पृष्ठ के किस हिस्से को स्टाइल करना चाहते हैं।

CSS = चयनकर्ता + घोषणाएँ

CSS फ़ाइल में नियमों की एक श्रृंखला होती है जिसमें बताया गया है कि HTML फ़ाइल को कैसे स्वरूपित किया जाना चाहिए। प्रत्येक नियम में दो भाग होते हैं: स्टाइल क्या करना है, और इसे कैसे स्टाइल करना है। पहला भाग "चयनकर्ताओं" के रूप में ज्ञात शब्दों की एक श्रृंखला का उपयोग करके नियंत्रित किया जाता है।

इस लेख के उदाहरणों में शैली की घोषणाएं शामिल हैं, लेकिन वे फोकस नहीं हैं: चयनकर्ता स्वयं हैं।

ऐतिहासिक रूप से, ब्राउज़र सहायता के अलग-अलग डिग्री के साथ तीन सीएसएस चयनकर्ता स्तर (या संस्करण) थे। 2020 में, कैन आई यूज़ के अनुसार, ये सभी दुनिया भर के 99 प्रतिशत से अधिक उपयोगकर्ताओं के लिए उपलब्ध हैं।

स्तर 1 चयनकर्ताओं

स्तर 1 ने चार मूलभूत प्रकार के चयनकर्ताओं को पेश किया जो आज भी बड़ी संख्या में मामलों को कवर करते हैं।

पैटर्न	माचिस
E	सभी ई तत्व
.c	वर्ग = "c" के साथ सभी तत्व
#myid	आईडी के साथ तत्व = "myid"
EF	एक E तत्व के अंदर एक F तत्व
छद्म कक्षाएं
E:link	उस पृष्ठ पर हाइपरलिंक जिसे पहले नहीं देखा गया है
E:visited	उस पृष्ठ पर हाइपरलिंक जिसे पहले ही देखा जा चुका है
E:active	एक हाइपरलिंक जो वर्तमान में चयनित है
छद्म तत्वों
E::first-line	ई तत्व की पहली स्वरूपित रेखा
E::first-letter	एक ई तत्व का पहला स्वरूपित पत्र

चयनकर्ता टाइप करें

सबसे सरल चयनकर्ता "टाइप चयनकर्ता" है। यह तत्व के सभी उदाहरणों को लक्षित करता है, जैसे कि एक पैराग्राफ या बोल्ड टेक्स्ट:

 p { margin-bottom: 0; }
 b { font-family: sans-serif; }

कक्षा चयनकर्ता

वर्ग विशेषता आगे के शब्दार्थ को HTML तत्व में जोड़ने की अनुमति देती है, जैसे कि एक विशिष्ट प्रकार का पैराग्राफ। ऐसे तत्वों को सीएसएस में निम्न प्रकार से चुना जा सकता है:

 .intro { font-weight: bold; }

यह चयनकर्ता मिलान करेगा:

 <p class="intro">…</p>

लेकिन ध्यान दें कि यह मेल भी खाएगा:

 <ul class="intro">…</ul>

यदि आप केवल इंट्रो पैराग्राफ में इसे लागू करना चाहते हैं, तो आप चयनकर्ता और वर्ग चयनकर्ता को जोड़ सकते हैं:

 p.intro { font-weight: bold; }

आईडी चयनकर्ता

यदि आपके पास HTML आईडी विशेषता एक दस्तावेज के भीतर अद्वितीय होनी चाहिए, जैसे:

 <div id="contents">…</div>

यह एक "सामग्री" आईडी के साथ एकमात्र तत्व होना चाहिए। एक आईडी चयनकर्ता आपको किसी दस्तावेज़ में उस विशिष्ट तत्व को लक्षित करने की अनुमति देता है:

 #contents { color: #333; }

वंशज चयनकर्ता

कड़ाई से, एक "कॉम्बीनेटर", क्योंकि यह चयनकर्ता दो अन्य लोगों के बीच की जगह के बारे में है। HTML पदानुक्रमित है, जैसा कि डोम के हमारे अवलोकन में बताया गया है। एक वंश चयनकर्ता एक तत्व को किसी अन्य तत्व के अंदर उसके संदर्भ से पहचाने जाने की अनुमति देता है:

 table b { font-weight: normal; }

छद्म वर्ग और तत्व

छद्म चयनकर्ता उन वर्गों या तत्वों को लक्षित करते हैं जो स्पष्ट रूप से मौजूद नहीं हैं, लेकिन वैसे भी उपलब्ध कराए जाते हैं। उन्हें विशेष सामग्री बोनस के रूप में सोचें:

 p::first-line { text-transform: uppercase; }

चयनकर्ता सूची

यदि आप प्रत्येक के लिए समान नियमों को लागू करना चाहते हैं, तो चयनकर्ताओं को एक सूची में संयोजित करने के लिए अल्पविराम का उपयोग करें। के बजाय:

 th { padding: 1em; }
 td { padding: 1em; }

तुम लिख सकते हो:

 th, td { padding: 1em; }

विशेषता

एक स्टाइल शीट नियमों की एक श्रृंखला है जो एक तत्व से मेल करने के लिए चयनकर्ता का उपयोग करती है, लेकिन क्या होता है जब एक से अधिक नियम किसी दिए गए तत्व से मेल खाते हैं? परिणामी व्यवहार "विशिष्टता" द्वारा शासित होता है जो परिभाषित करता है कि किस मामले में किस नियम का उपयोग किया जाता है:

 p.intro { color: black; }
 p { color: gray; }

ऐसे मामलों में, प्राथमिकता लेने वाला नियम इसकी विशिष्टता से परिभाषित होता है, इस प्रकार है:

1. आईडी चयनकर्ता (`# सामग्री`) सबसे विशिष्ट हैं।
2. वर्ग चयनकर्ता (`.author`) कम विशिष्ट हैं।
3. प्रकार चयनकर्ता (`p`) सबसे कम विशिष्ट हैं।

विशिष्टता की गणना करते समय, प्रत्येक स्तर पर केवल तभी विचार किया जाता है जब दो चयनकर्ताओं का उच्च स्तर पर समान स्कोर होता है, इसलिए "#contents" "article.news p.author.special" की तुलना में अधिक विशिष्ट है क्योंकि आईडी चयनकर्ताओं पर पूर्व "जीतता है"।

स्तर 2 चयनकर्ता

CSS चयनकर्ताओं के अगले संशोधन में छद्म-वर्गों और छद्म तत्वों पर विस्तारित, चयनकर्ताओं को शामिल किया गया, और दो नए संयोजनकर्ताओं को जोड़ा गया।

पैटर्न	माचिस
*	कोई तत्व
E > F	E तत्व का F तत्व बच्चा
E + F	एक F तत्व तुरंत E तत्व से पहले आता है
चयनकर्ताओं को आकर्षित करें
E[foo]	एक ई तत्व एक "फू" विशेषता के साथ
E[foo="bar"]	एक ई तत्व जिसका "फू" विशेषता बिल्कुल "बार" है
E[foo~="bar"]	एक ई तत्व जिसका "फू" विशेषता व्हाट्सएप-अलग-अलग मूल्यों की एक सूची है, जिसमें से एक "बार" है
E[foo|="en"]	एक ई तत्व जिसका "फू" विशेषता में "एन" के साथ शुरू होने वाले मानों की हाइफ़न-अलग-अलग सूची है
छद्म कक्षाएं
E:first-child	एक ई तत्व, अपने माता-पिता की पहली संतान
E:lang(fr)	भाषा "E" में टाइप E का एक तत्व
छद्म तत्वों
E::before	ई तत्व की सामग्री से पहले उत्पन्न सामग्री
E::after	E तत्व की सामग्री के बाद उत्पन्न सामग्री

यूनिवर्सल चयनकर्ता

"*" किसी भी तत्व से मेल खाता है। यह अक्सर उपयोगी नहीं होता है, लेकिन यदि आप किसी भी डिफ़ॉल्ट मार्जिन को रीसेट करना चाहते हैं, उदाहरण के लिए, आप ऐसा कर सकते हैं:

 * { margin: 0; }

चयनकर्ताओं को आकर्षित करें

गुण चयनकर्ता शैलियों को विशेष रूप से लक्षित करने की अनुमति देते हैं, एक तत्व की विशेषता द्वारा फ़िल्टर की गई:

 a[title] { text-decoration: underline dotted; }

बाल संयोजक: एक तत्व तुरंत दूसरे के अंदर

वंशज कंबाइनेटर के समान है, लेकिन यह केवल पेड़ से नीचे किसी भी वंशज नहीं, बल्कि तत्काल बच्चों से मेल खाता है। उदाहरण के लिए, "उल> ली" यहां केवल "धारा 1" पाठ से मेल खाएगा, न कि "धारा 1.1":

 <ul>
 <li>
 Section 1
 <ul>
 <li>Section 1.1</li>
 <li>Section 1.2</li>
 </ul>
 <li>
 </ul>

आसन्न सिबलिंग संयोजक: अगला सिबलिंग

 h1 + p { font-weight: bold; }

अक्सर मार्जिन को नियंत्रित करने के लिए उपयोगी होता है, या एक विशिष्ट वर्ग के बिना एक परिचयात्मक पैराग्राफ, यह चयनकर्ता एक तत्व से तभी मेल खाता है जब यह तुरंत दूसरे का अनुसरण करता है। उदाहरण में, यहां केवल पहला पैराग्राफ मिलान किया जाएगा, दूसरा नहीं:

 <h1>Contents</h1>
 some extra text
 <p>Introductory paragraph</p>
 <p>Following paragraph</p>

ध्यान दें कि यह चयनकर्ता केवल तत्वों पर विचार करता है – पाठ नहीं – जब यह तय करना कि अगला भाई-बहन क्या है।

विरासत

कुछ सीएसएस गुण पूर्वज तत्व से उनके मूल्य का वारिस करते हैं। व्यवहार में, इसका अर्थ है- उदाहरण के लिए- "शरीर" तत्व का फ़ॉन्ट चेहरा सेट करने का अर्थ है कि प्रत्येक अनुच्छेद, तालिका, आदि भी उसी फ़ॉन्ट चेहरे का उपयोग करता है।

बेशक, यह वही है जो आप उम्मीद करेंगे, लेकिन उस संपत्ति पर विचार करें जो विरासत में नहीं मिलती है: उदाहरण के लिए "मार्जिन"। आप नहीं चाहेंगे कि प्रत्येक व्यक्ति अनुच्छेद या बोल्ड टेक्स्ट के पूरे दस्तावेज़ के समान मार्जिन हो।

संबंधित: सरल सीएसएस कोड उदाहरण आप 10 मिनट में सीख सकते हैं

अंगूठे का एक अच्छा नियम तत्वों को लक्षित करना है जैसा कि आम तौर पर समझ में आता है – प्रत्येक व्यक्तिगत तत्व को लक्षित न करें जब एक साधारण "बॉडी" चयनकर्ता करेगा।

स्तर 3 चयनकर्ताओं

इस स्तर पर कई और छद्म वर्गों को जोड़ा गया, जिसमें कुछ विशेषता चयनकर्ताओं और एक नए कॉम्बिनेटर के साथ थी।

पैटर्न	माचिस
E ~ F	एक ई तत्व से पहले एक एफ तत्व
चयनकर्ताओं को आकर्षित करें
E[foo^="bar"]	एक तत्व जिसका "फू" विशेषता स्ट्रिंग "बार" से शुरू होता है
E[foo$="bar"]	एक तत्व जिसका "फू" विशेषता स्ट्रिंग "बार" के साथ समाप्त होता है
E[foo*="bar"]	एक ई तत्व जिसका "फू" विशेषता में विकल्प "बार" शामिल है
छद्म कक्षाएं
E:root	एक ई तत्व, दस्तावेज़ की जड़
E:nth-child(n)	एक तत्व, अपने माता-पिता का n-th बच्चा
E:nth-last-child(n)	एक तत्व, अपने माता-पिता का आखिरी बच्चा, जो पिछले एक से गिनती करता है
E:nth-of-type(n)	एक ई तत्व, इसके प्रकार का एन-वें भाई
E:nth-last-of-type(n)	एक ई तत्व, एन-वें अपने प्रकार का सिबलिंग, पिछले एक से गिनती
E:last-child	एक ई तत्व, अपने माता-पिता का अंतिम बच्चा
E:first-of-type	एक ई तत्व, अपने प्रकार का पहला सिबलिंग
E:last-of-type	एक ई तत्व, अपने प्रकार का अंतिम सिबलिंग
E:only-child	एक ई तत्व, केवल अपने माता-पिता की संतान
E:only-of-type	एक ई तत्व, केवल अपने प्रकार का सहोदर
E:empty	एक ई तत्व जिसमें कोई बच्चे नहीं हैं (पाठ नोड्स सहित)
E:target	एक E तत्व संदर्भित URI का लक्ष्य है
E:enabled	उपयोगकर्ता इंटरफ़ेस तत्व E जो सक्षम है
E:disabled	एक उपयोगकर्ता इंटरफ़ेस तत्व E जो अक्षम है
E:checked	एक यूजर इंटरफेस एलिमेंट E जिसे चेक किया गया है
E:not(s)	एक ई तत्व जो साधारण चयनकर्ता से मेल नहीं खाता है

चयनकर्ताओं को आकर्षित करें

आप ऐसे तत्वों के साथ तत्वों का चयन कर सकते हैं जो किसी दिए गए मूल्य से शुरू होता है: a[href^="https:"] , एक दिए गए मूल्य के साथ समाप्त होता है: img[src$=".gif"] , या इसमें एक मूल्य होता है: a[*="value"] ।

छद्म कक्षाएं

अतिरिक्त छद्म-कक्षाओं में ": अंतिम-बच्चा", ": खाली" (बिना किसी तत्व के एक तत्व से मेल खाने के लिए), और ": जाँच" शामिल है, जो एक चेकबॉक्स इनपुट की तरह एक तत्व से मेल खाता है, लेकिन केवल जब यह जाँच की जाती है।

जनरल सिबलिंग कॉम्बिनेटर: ए फॉलो सिबलिंग

लेवल 2 से सटे सिबलिंग कॉम्बीनेटर के समान, यह किसी भी सिबलिंग से मेल खाता है जो न केवल अगले के लिए आता है:

 h1 ~ p { font-size: 110%; }

CSS चयनकर्ता और उनका उपयोग कैसे करें

अब आप बस सब कुछ के बारे में जानते हैं कि सीएसएस का उपयोग करके वेबपेज के भाग का चयन कैसे करें। अब आप अपने पृष्ठों को विभिन्न प्रकार के CSS गुणों के साथ स्टाइल करने के लिए तैयार हैं जो रंगों से लेकर लेआउट तक सब कुछ कवर करते हैं।

इमेज क्रेडिट: पंकज पटेल / अनप्लैश