CSS एट्रिब्यूट सेलेक्टर विस्तृत

CSS 2 में विशेषता चयनकर्ता शामिल किया गया।

विशेषता चयनकर्ता, एलीमेंट की विशेषता और विशेषता मान के आधार पर एलीमेंट को चुन सकते हैं。

साधारण विशेषता चयनकर्ता

यदि किसी विशेषता वाले एलीमेंट को चुनना चाहते हैं, बिना विशेषता मान के, साधारण विशेषता चयनकर्ता का उपयोग कर सकते हैं。

उदाहरण 1

अगर आप शीर्षक (title) वाले सभी एलीमेंट को लाल बनाना चाहते हैं, तो लिख सकते हैं:

*[title] {color:red;}

स्वयं प्रयोग करने का प्रयास करें

उदाहरण 2

इसी तरह, केवल href विशेषता वाले अंकन (a एलीमेंट) पर स्टाइल लागू कर सकते हैं:

a[href] {color:red;}

स्वयं प्रयोग करने का प्रयास करें

उदाहरण 3

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

उदाहरण, यदि आप ऐसे HTML लिंक के पाठ को लाल बनाना चाहते हैं जिनके पास एक साथ href और title एट्रिब्यूट हैं, तो इस तरह लिखें:

a[href][title] {color:red;}

स्वयं प्रयोग करने का प्रयास करें

उदाहरण 4

इस विशेषता का इस्तेमाल कुछ रचनात्मक तरीकों से किया जा सकता है。

उदाहरण, सभी alt एट्रिब्यूट वाली छवियों पर शैली लगाकर इन प्रमाणित छवियों को उभारा दिया जा सकता है:

img[alt] {border: 5px solid red;}

स्वयं प्रयोग करने का प्रयास करें

सूचना:इस विशेष उदाहरण को चिकित्सा करने के लिए और नहीं डिजाइन करने के लिए इस्तेमाल किया जाता है, अर्थात इसका उपयोग छवि के वास्तविक उपयोग की पुष्टि करने के लिए किया जाता है。

उदाहरण 5: XML दस्तावेज़ के लिए प्रतिबंध चयनकर्ता

प्रतिबंध चयनकर्ता XML दस्तावेज़ में काफी उपयोगी है, क्योंकि XML भाषा एलिमेंट और एट्रिब्यूट के उपयोग के लिए नाम और एट्रिब्यूट नाम निर्दिष्ट करने का प्रयास करती है。

इसके लिए मान लीजिए कि हमने सौरमंडल के ग्रहों के वर्णन के लिए एक XML दस्तावेज़ डिजाइन किया है। यदि आप इसे ऐसे planet एलिमेंट को लाल बनाना चाहते हैं जिनके पास moons एट्रिब्यूट हैं, ताकि आप उन्हें अधिक ध्यान दे सकें, तो इस तरह लिखें:

planet[moons] {color:red;}

यह निम्नलिखित टैग खंड में दूसरे और तीसरे एलिमेंट के पाठ को लाल बनाएगा, लेकिन पहले एलिमेंट के पाठ नहीं:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

प्रभाव देखें

विशेष एट्रिब्यूट मूल्य से चयन करना

कुछ विशेष एट्रिब्यूट वाले एलिमेंट को चुनने के अलावा, आप चुनाव को और छोटा कर सकते हैं, केवल विशेष एट्रिब्यूट मूल्य वाले एलिमेंट को चुनते हैं。

उदाहरण 1

उदाहरण, इस प्रकार आपको वेब सर्वर पर किसी निर्दिष्ट दस्तावेज़ के लिंक को लाल बनाना चाहिए तो इस तरह लिखें:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

स्वयं प्रयोग करने का प्रयास करें

उदाहरण 2

सरल एट्रिब्यूट सेलेक्टर के समान, कई एट्रिब्यूट-मूल्य सेलेक्टर को जोड़कर एक दस्तावेज़ को चुन सकते हैं。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

यह निम्नलिखित टैग में पहले अवयव के लिंक पाठ को लाल बनाएगा, लेकिन दूसरे या तीसरे लिंक पर प्रभाव नहीं होगा:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

स्वयं प्रयोग करने का प्रयास करें

उदाहरण 3

इसी तरह, XML भाषा भी इस तरीके से साइल निर्धारित कर सकती है।

अब हम फिर ग्रह के उदाहरण की ओर वापस आएं। यदि आपको केवल moons अभियान के मालिकी 1 वाले planet एलिमेंट को चुनना है:

planet[moons="1"] {color: red;}

उपरोक्त कोड निम्नलिखित टैग के दूसरे एलिमेंट को लाल बनाएगा, लेकिन पहला और तीसरा एलिमेंट प्रभावित नहीं होंगे:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

प्रभाव देखें

अभियान और अभियान मालिकी को पूर्ण रूप से मेल खाना चाहिए

ध्यान दें, इस फॉर्मेट को मालिकी मालिकी के साथ पूर्ण तरीके से मेल खाना चाहिए।

अगर अभियान मालिकी में अलग-अलग मालिकी की सूची होती है, तो मेल खराब हो सकता है।

यहाँ कोई नज़र रखें:

<p class="important warning">यह पैराग्राफ एक बहुत महत्वपूर्ण चेतावनी है。</p>

अगर यह लिखा जाए p[class="important"], तो यह नियम उदाहरण टैग के लिए मेल नहीं खाता।

अगर आपको किसी विशिष्ट अभियान मालिकी के अनुसार चयन करना है, तो इस तरह लिखना होगा:

p[class="important warning"] {color: red;}

स्वयं प्रयोग करने का प्रयास करें

भागीय अभियान के अभियान

अगर आपको अभियान मालिकी में किसी शब्द के अनुसार चयन करना है, तो वॉव ( ~ ) का इस्तेमाल करना होगा।

यदि आप class अभियान में important वाले एलिमेंट को चुनना चाहते हैं, तो इस चयनकर्ता का इस्तेमाल कर सकते हैं:

p[class~="important"] {color: red;}

स्वयं प्रयोग करने का प्रयास करें

अगर वॉव को अनदेखा कर दिया जाता है, तो यह अर्थ है कि पूर्ण मालिकी का माप किया जाना है।

भागीय अभियान का अभियान और बिंदु की क्लास नाम योजना के अंतर

यह चयनकर्ता हमने कहीं पर चर्चा की हुई class चयनकर्ता में बिंदु की क्लास नाम योजना से समान है।

अर्थात, p.important और p[class="important"] HTML दस्तावेज़ पर लागू होने पर समान हैं।

तो, "~=" चयनकर्ता क्यों चाहिए? क्योंकि यह किसी भी अभियान के लिए इस्तेमाल किया जा सकता है, न केवल class के लिए।

उदाहरण में, एक बड़े संख्या में इमेज वाला दस्तावेज़ हो सकता है, जिसमें से केवल कुछ ही इमेजेज़ हैं। इसके लिए, एक title दस्तावेज़ के भागीय अभियान का चयनकर्ता इस्तेमाल कर सकते हैं:

img[title~="चित्र"] {border: 1px solid gray;}

इस नियम से "Figure" शब्द को शामिल करने वाले सभी चित्रों को चुना जाएगा। title गुण को नहीं रखने वाले या title गुण में "Figure" नहीं रखने वाले चित्रों को नहीं चुना जाएगा।

स्वयं प्रयोग करने का प्रयास करें

उपसूत्र मेल होने वाले गुण चयनकर्ता

अब आपको एक अधिक उच्चस्तरीय चयनकर्ता मॉड्यूल को पेश करना है, जो CSS2 के बाद जारी किया गया है और इसमें अधिक अंशीय गुण चयनकर्ता शामिल हैं। नियम के अनुसार, इसे "उपसूत्र मेल होने वाले गुण चयनकर्ता" कहा जाना चाहिए。

कई आधुनिक ब्राउज़र इन चयनकर्ताओं को समर्थित करते हैं, जिसमें IE7 भी शामिल है。

नीचे दिए गए पटल से इन चयनकर्ताओं का सरल सारांश मिलता है：

प्रकार वर्णन
[abc^="def"] abc गुण मान "def" से शुरू होने वाले सभी तत्वों को चुना जाएगा
[abc$="def"] abc गुण मान "def" से समाप्त होने वाले सभी तत्वों को चुना जाएगा
[abc*="def"] abc गुण मान में "def" सबसे बड़े शब्द "def" शामिल होने वाले सभी तत्वों को चुना जाएगा

इनके उपयोग की कई संभावनाएँ हैं。

उदाहरण के तौर पर, यदि आपको CodeW3C.com के सभी लिंकों पर स्टाइल लगाना है, तो आपको सभी इन लिंकों के लिए class नहीं निर्दिष्ट करना होगा और इस क्लास के अनुसार स्टाइल लिखना होगा, बल्कि नीचे दिए गए नियम को ही लिखना होगा：

a[href*="codew3c.com"] {color: red;}

स्वयं प्रयोग करने का प्रयास करें

सूचना:किसी भी गुण को इन चयनकर्ताओं का उपयोग किया जा सकता है。

विशेष गुण चयनकर्ता प्रकार

अंत में, आपको विशेष गुण चयनकर्ता पेश करना है। नीचे उदाहरण देखें：

*[lang|="en"] {color: red;}

इस नियम से lang गुण के मान en या en- से शुरू होने वाले सभी तत्वों को चुना जाएगा। इसलिए, निम्नलिखित निदर्शनों में पहले तीन तत्व चुने जाएंगे और दूसरे तीन तत्व नहीं चुने जाएंगे：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

स्वयं प्रयोग करने का प्रयास करें

आमतौर पर, [att|="val"] किसी भी गुण और इसके मान के लिए उपयोग किया जा सकता है。

यदि एक HTML दस्तावेज़ में एक श्रृंखला चित्र है, जिसमें प्रत्येक चित्र का फ़ाइल नाम इस तरह का है figure-1.jpg और figure-2.jpg। इससे इन सभी चित्रों को मेल खाने के लिए निम्नलिखित चयनकर्ता का उपयोग किया जा सकता है：

img[src|="figure"] {border: 1px solid gray;}

स्वयं प्रयोग करने का प्रयास करें

बेशक, यह विशेषता चयनकर्ता का सबसे आम उपयोग भाषा मान के साथ मेल खाना है।

CSS सेलेक्टर रेफरेंस मैनुअल

सेलेक्टर वर्णन
[attribute] विशिष्ट एट्रिब्यूट के साथ होने वाले हर एलिमेंट को मेल खाना
[attribute=value] विशिष्ट एट्रिब्यूट और वाल्यू के साथ होने वाले हर एलिमेंट को मेल खाना
[attribute~=value] विशिष्ट शब्द के साथ होने वाले हर एलिमेंट को मेल खाना
[attribute|=value] विशिष्ट वाल्यू के साथ शुरू होने वाले और पूरे शब्द के रूप में होने वाले एलिमेंट को चुनना
[attribute^=value] विशिष्ट वाल्यू के साथ शुरू होने वाले हर एलिमेंट को मेल खाना
[attribute$=value] विशिष्ट वाल्यू के साथ खत्म होने वाले हर एलिमेंट को मेल खाना
[attribute*=value] विशिष्ट वाल्यू में निर्दिष्ट वाल्यू वाले हर एलिमेंट को मेल खाना