(विशेषता) - सीएसएस-ट्रिक्स

ऐसे कई तरीके हैं जिनसे आप CSS में तत्वों का चयन कर सकते हैं। सबसे बुनियादी चयन टैग नाम से होता है, जैसे p ( )। एक टैग चयनकर्ता की तुलना में लगभग कुछ अधिक विशिष्ट विशेषताओं का उपयोग करता है - classऔर IDदोनों HTML तत्वों पर उन विशेषताओं का चयन करते हैं। लेकिन classऔर IDकेवल एकमात्र गुण डेवलपर्स का चयन नहीं कर सकते हैं। हम किसी भी तत्व की विशेषताओं का चयनकर्ताओं के रूप में उपयोग कर सकते हैं।

गुण चयन में एक विशेष वाक्यविन्यास है। यहाँ एक उदाहरण है:

a(href="https://css-tricks.com") ( color: #E18728; )

यह एक सटीक मिलान चयनकर्ता है जो केवल href"https://css-tricks.com" के सटीक विशेषता मान के साथ लिंक का चयन करेगा ।

सात विभिन्न प्रकार

गुण चयनकर्ता डिफ़ॉल्ट रूप से केस-संवेदी होते हैं (नीचे केस-असंवेदनशील मिलान देखें), और कोष्ठक के अंदर लिखे गए हैं ()।

एक विशेषता चयनकर्ता के साथ सात अलग-अलग प्रकार के मिलान मिल सकते हैं, और प्रत्येक के लिए वाक्यविन्यास अलग है। सटीक मिलान चयनकर्ता के सिंटैक्स पर अधिक जटिल विशेषता चयनकर्ताओं में से प्रत्येक का निर्माण होता है - वे सभी विशेषता नाम के साथ शुरू होते हैं और आमतौर पर उद्धरणों में विशेषता मूल्य (ओं) के बाद एक समान चिह्न के साथ समाप्त होते हैं। विशेषता नाम और बराबर चिह्न के बीच क्या जाता है जो चयनकर्ताओं के बीच अंतर बनाता है।

(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )

मान में सम्‍मिलित है: विशेषता मान में केवल मान के रूप में एक शब्द होता है, मानों की सूची में एक मान या दूसरे मान के भाग के रूप में। इस चयनकर्ता का उपयोग करने के लिए, बराबर चिह्न से पहले एक तारांकन चिह्न (*) जोड़ें। उदाहरण के लिए, img(alt*="art")ऑल्ट टेक्स्ट "एब्सट्रैक्ट आर्ट" और "एथलीट एक नया खेल शुरू" के साथ छवियों का चयन करेंगे, क्योंकि मूल्य "आर्ट" शब्द "शुरुआती" में है।

मान एक अंतरिक्ष-पृथक सूची में है: मान या तो एकमात्र विशेषता मान है, या मानों के एक अलग-अलग सेट में संपूर्ण मान है। "समाहित" चयनकर्ता के विपरीत, यह चयनकर्ता शब्द के टुकड़े के रूप में मूल्य की तलाश नहीं करेगा। इस चयनकर्ता का उपयोग करने के लिए, बराबर चिह्न से पहले एक टिल्ड (~) जोड़ें। उदाहरण के लिए, img(alt~="art")ऑल्ट टेक्स्ट "एब्सट्रैक्ट आर्ट" और "आर्ट शो" के साथ छवियों का चयन करेंगे, लेकिन "एथलीट एक नया खेल शुरू नहीं करेंगे" (जिसमें "चयनकर्ता" होता है)।

मान के साथ शुरू होता है: विशेषता मान चयनित शब्द से शुरू होता है। इस चयनकर्ता का उपयोग करने के लिए, बराबर चिह्न से पहले एक कैरेट (^) जोड़ें। मत भूलना, मामले की संवेदनशीलता मायने रखती है। उदाहरण के लिए, img (alt = "कला") ऑल्ट टेक्स्ट "आर्ट शो" और "कलात्मक पैटर्न" के साथ छवियों का चयन करेगा, लेकिन ऑल्ट टेक्स्ट "आर्थर मिलर" के साथ एक छवि नहीं है क्योंकि "आर्थर" एक बड़े अक्षर से शुरू होता है ।

मान पहली बार डैश-पृथक सूची में है: यह चयनकर्ता "प्रारंभकर्ता" चयनकर्ता के समान है। यहां, चयनकर्ता एक मूल्य से मेल खाता है जो या तो एकमात्र मूल्य है या मूल्यों की डैश-अलग सूची में पहला है। इस चयनकर्ता का उपयोग करने के लिए, बराबर चिह्न से पहले एक पाइप वर्ण (|) जोड़ें। उदाहरण के लिए, "1900-2000" के मान के li(data-years|="1900")साथ सूची आइटम का चयन करेंगे data-years, लेकिन data-years"1800-1900" के मान के साथ सूची आइटम नहीं ।

मान समाप्त होता है: चयनित मान के साथ विशेषता मान समाप्त होता है। इस चयनकर्ता का उपयोग करने के लिए, बराबर चिह्न से पहले एक डॉलर चिह्न ($) जोड़ें। उदाहरण के लिए, a(href$="pdf").pdf के साथ समाप्त होने वाले प्रत्येक लिंक का चयन करता है।

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

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन अटैचमेंट सेलेक्टर्स देखें।

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

(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )

केस-असंवेदनशील मिलान

केस-असंवेदनशील विशेषता चयनकर्ता CSS वर्किंग ग्रुप के चयनकर्ता स्तर 4 विनिर्देशन का हिस्सा हैं। जैसा कि ऊपर उल्लेख किया गया है, विशेषता मान स्ट्रिंग डिफ़ॉल्ट केस-संवेदी द्वारा होते हैं, लेकिन iक्लोजिंग ब्रैकेट के ठीक पहले जोड़कर केस-असंवेदनशील में बदला जा सकता है :

(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )

केस-असंवेदनशील मिलान अप्रत्याशित, मानव-लिखित पाठ रखने वाली विशेषताओं को लक्षित करने के लिए वास्तव में आसान हो सकता है। उदाहरण के लिए, मान लीजिए कि आप किसी चैट ऐप पर एक भाषण बुलबुला स्टाइल कर रहे थे और किसी भी रूप में पाठ "हैलो" के साथ किसी भी संदेश में "लहराते हाथ" जोड़ना चाहते थे। आप केवल सीएसएस के साथ ऐसा कर सकते हैं, सभी संभव विविधताओं को पकड़ने के लिए केस-असंवेदनशील मिलान का उपयोग कर सकते हैं:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा मिलान पेन केस-असंवेदनशील CSS विशेषता देखें।

उनका संयोजन कर रहे हैं

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

div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )

या यहां तक ​​कि कई विशेषता चयनकर्ताओं को मिलाएं। यह उदाहरण ऑल्ट टेक्स्ट के साथ छवियों का चयन करता है जिसमें "व्यक्ति" शब्द एकमात्र मान या एक अंतरिक्ष अलग सूची में एक मूल्य शामिल है , और एक srcमूल्य जिसमें "लॉरेम" शामिल है:

img(alt~="person")(src*="lorem") ( /* style rules here */ )

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन कंबाइंड एट्रीब्यूट्स एंड अट्रेक्शन-ओनली सिलेक्शन देखें।

जावास्क्रिप्ट और jQuery में चयनकर्ताओं को शामिल करें

विशेषता चयनकर्ताओं का उपयोग किसी अन्य CSS चयनकर्ता की तरह ही jQuery में किया जा सकता है। जावास्क्रिप्ट में, आप के साथ document.querySelector()और चयनकर्ताओं का उपयोग कर सकते हैं document.querySelectorAll()।

जेएस में कलम विशेषता चयनकर्ताओं और कोडपैन पर सीएसएस-ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा देखें।

सम्बंधित

• कक्षा
• ईद

अधिक जानकारी

• गुण चयनकर्ताओं पर स्कीनी
• एमडीएन में चयनकर्ताओं को आकर्षित करें
• डब्ल्यू 3 सी सीएसएस कल्पना में चयनकर्ताओं को शामिल करें

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
कोई	कोई	कोई	कोई	7+	कोई	कोई