CSS एट्रिब्यूट सिलेक्टर: एट्रिब्यूट के आधार पर एलिमेंट्स चुनें

CSS सिलेक्टर्स वेब डेवलपर्स को वेब पेज पर किसी विशेष एलिमेंट या एलिमेंट्स के सेट पर स्टाइल लागू करने की अनुमति देते हैं।

सिलेक्टर्स के साथ काम करते समय, आप तय कर सकते हैं कि आप केवल एक विशेष एट्रिब्यूट वाले एलिमेंट्स को टार्गेट करना चाहते हैं। यहीं पर CSS एट्रिब्यूट सिलेक्टर आता है। एट्रिब्यूट सिलेक्टर आपको केवल एक विशिष्ट एट्रिब्यूट वाले एलिमेंट्स पर कुछ स्टाइल लागू करने में मदद करता है।

HTML एट्रिब्यूट्स

HTML में, एट्रिब्यूट्स का उपयोग किसी एलिमेंट की अतिरिक्त विशेषताओं या प्रॉपर्टीज को परिभाषित करने के लिए किया जाता है। उदाहरण के लिए, height एट्रिब्यूट इमेज की ऊंचाई सेट करता है, और title एट्रिब्यूट वेब एलिमेंट का शीर्षक सेट करता है।

आप नाम/मान जोड़ी संरचना का उपयोग करके एट्रिब्यूट्स की घोषणा करते हैं: name="value"।

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

1. [attribute] - एट्रिब्यूट मौजूद है

[title] { font-size: 16px; }

हर उस एलिमेंट पर लागू होता है जिसमें title एट्रिब्यूट है, चाहे उसका मान कुछ भी हो।

2. [attribute="value"] - सटीक मान मिलान

a[href="careerkarma.com"] { background-color: orange; }

केवल उन <a> एलिमेंट्स का चयन करता है जिनका href एट्रिब्यूट बिल्कुल "careerkarma.com" के बराबर है।

3. [attribute~="value"] - शब्द मिलान (स्पेस-सेपरेटेड)

p[title~="blue"] { color: blue; }

उन <p> एलिमेंट्स का चयन करता है जिनके title एट्रिब्यूट में "blue" एक अलग शब्द के रूप में है। "blue color" या "color blue" पर लागू होगा, लेकिन "blueColor" पर नहीं।

4. [attribute|="value"] - प्रीफिक्स मिलान (हाइफन-सेपरेटेड)

div[class|="top"] { padding-top: 10px; }

उन <div> एलिमेंट्स का चयन करता है जिनका class एट्रिब्यूट "top" से शुरू होता है, जिसमें "top-" के बाद अतिरिक्त टेक्स्ट वाले (जैसे "top-style") शामिल हैं। "topstyle" पर लागू नहीं होगा।

5. [attribute^="value"] - मान से शुरू होता है

div[class^="paddingBottom"] { padding-bottom: 10px; }

उन एलिमेंट्स का चयन करता है जिनके एट्रिब्यूट मान निर्दिष्ट मान से शुरू होते हैं। पूरा शब्द होने की आवश्यकता नहीं है। "paddingBottomStyle", "paddingBottom-element" पर लागू होगा।

6. [attribute$="value"] - मान पर समाप्त होता है

a[href$=".app"] { color: gray; }

उन <a> एलिमेंट्स का चयन करता है जिनके href मान ".app" पर समाप्त होते हैं।

7. [attribute*="value"] - मान कहीं भी मौजूद है

div[class*="allPadding"] { padding: 50px; }

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

निष्कर्ष

CSS एट्रिब्यूट सिलेक्टर डेवलपर्स को उनके एट्रिब्यूट मानों के आधार पर एलिमेंट्स का चयन करने और उन एलिमेंट्स पर विशिष्ट स्टाइल लागू करने की अनुमति देता है। इस ट्यूटोरियल में, उदाहरणों के संदर्भ में, एट्रिब्यूट सिलेक्टर्स की मूल बातें और CSS एट्रिब्यूट सिलेक्टर के सभी प्रकारों का उपयोग कैसे करें, इस पर चर्चा की गई। अब आप CSS एट्रिब्यूट सिलेक्टर का उपयोग एक प्रो की तरह करने के लिए तैयार हैं।