html - सीएसएस में डेटा विशेषता द्वारा तत्वों का चयन करें





css html5 css-selectors custom-data-attribute (5)


आप कई चयनकर्ताओं को जोड़ सकते हैं और यह इतना अच्छा है कि आप अपने मूल्य के आधार पर प्रत्येक विशेषता और विशेषता का चयन कर सकते हैं जैसे href उनके मूल्यों के आधार पर केवल सीएसएस के साथ ..

गुण चयनकर्ता आपको id और class विशेषताओं के साथ कुछ अतिरिक्त खेलने की अनुमति देता है

विशेषता चयनकर्ताओं पर यहां एक शानदार पठन है

Fiddle

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}
<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

ब्राउज़र समर्थन:
आईई 6 +, क्रोम, फ़ायरफ़ॉक्स और सफारी

आप here विवरण की जांच कर सकते here

क्या सीएसएस में उनके एचटीएमएल 5 डेटा विशेषताओं (उदाहरण के लिए, data-role ) द्वारा तत्वों का चयन करना संभव है?




आधुनिक ब्राउज़रों में उनकी सामग्री के बावजूद विशेषताओं का चयन करना भी संभव है

साथ में:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

उदाहरण के लिए: http://codepen.io/jasonm23/pen/fADnu

ब्राउज़र के एक बहुत ही महत्वपूर्ण प्रतिशत पर काम करता है।

ध्यान दें कि इसका उपयोग JQuery चयनकर्ता में या document.querySelector का उपयोग करके भी किया जा सकता है




यह CSS3 substring विशेषता चयनकर्ताओं को ध्यान देने योग्य है

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}



यदि आप एक विशेषता चयनकर्ता का उपयोग करना चाहते हैं, तो सुनिश्चित करें कि क्यों नहीं:

[data-role="page"] {
    /* Styles */
}

ऐसे कई प्रकार के गुण चयनकर्ता हैं जिनका उपयोग आप विभिन्न परिदृश्यों के लिए कर सकते हैं जो सभी लिंक किए गए दस्तावेज़ में शामिल हैं। ध्यान दें कि, कस्टम डेटा विशेषताओं के बावजूद "नई HTML5 सुविधा" होने के बावजूद,

  • ब्राउज़र में आमतौर पर गैर-मानक विशेषताओं का समर्थन करने में कोई समस्या नहीं होती है, इसलिए आप उन्हें विशेषता चयनकर्ताओं के साथ फ़िल्टर करने में सक्षम होना चाहिए; तथा

  • आपको सीएसएस सत्यापन के बारे में चिंता करने की ज़रूरत नहीं है, क्योंकि सीएसएस को गैर-नामांकित विशेषता नामों की परवाह नहीं है जब तक कि वे चयनकर्ता सिंटैक्स को तोड़ न दें।




वर्तमान में कोई माता-पिता चयनकर्ता नहीं है और डब्ल्यू 3 सी की किसी भी वार्ता में इसकी भी चर्चा नहीं की जा रही है। आपको यह समझने की जरूरत है कि ब्राउज़र द्वारा सीएसएस का मूल्यांकन वास्तव में समझने के लिए किया जाता है कि हमें इसकी आवश्यकता है या नहीं।

यहां बहुत सारे तकनीकी स्पष्टीकरण हैं।

जोनाथन स्नूक बताते हैं कि सीएसएस का मूल्यांकन कैसे किया जाता है

अभिभावक चयनकर्ता की वार्ता पर क्रिस कोयियर

हैरी रॉबर्ट्स फिर से कुशल सीएसएस चयनकर्ताओं को लिखने पर

लेकिन निकोल सुलिवान के सकारात्मक रुझानों पर कुछ दिलचस्प तथ्य हैं

ये लोग फ्रंट एंड डेवलपमेंट के क्षेत्र में सभी शीर्ष वर्ग हैं।





html css html5 css-selectors custom-data-attribute