CSS में डेटा विशेषता द्वारा तत्वों का चयन करें

Question

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

Answer 1

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

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

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

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

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

Comments

सभी नाविक के साथ संगत है?

— क्रिस्टोफ़ डेबोव

@ क्रिस्तोपे डेबोव: IE7 + और सब कुछ।

— BoltClock

सीएसएस को यह पता लगाने के लिए प्रतीत नहीं होता है कि डेटा विशेषता सेट है, या जेएस के माध्यम से बदल दी गई है।

— ᴍᴀᴛᴛ ᴍᴀᴛᴛ

आगे की जांच के बाद यह दिखाई देगा $("#element").data("field","value");कि यह डेटा विशेषताओं को नहीं बदलता है क्योंकि यह केवल डोम के jQuery के कैश्ड संस्करण को संशोधित करता है। वास्तविक DOM विशेषता को बदलने के लिए किसी को उपयोग करने की आवश्यकता होती है $("#element").attr("data-field","value");। मेरी मूल टिप्पणी को अमान्य बना रहा है।

— ᴍᴀᴛᴛ ᴍᴀᴛᴛ

हाँ, ऐसा लग रहा है कि डेटासेट बदलने के साथ-साथ @Matthew - jsfiddle.net/BoltClock/k378xgj3 कुछ भी jQuery के लिए धन्यवाद काम नहीं करता है ।

— BoltClock

Answer 2

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

साथ में:

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

[anything] {
   /* Styles */
}

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

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

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

Comments

वाह, मैंने कभी नहीं देखा कि इसे इस तरह से इस्तेमाल किया जा सकता है !! +1! और एफडब्ल्यूआईडब्ल्यू, अब जब ब्राउज़रशॉट्स समाप्त हो गए हैं, तो मेरा मानना ​​है कि यह IE7 + में काम करता है इसलिए इसका समर्थन बहुत अधिक सर्वव्यापी है। यह मजेदार है कि क्रिस कॉयियर ने भी यहां इसका उल्लेख नहीं किया है

— कैमिलो मार्टिन

धन्यवाद @CamiloMartin भ्रम / झुंझलाहट से बचने के लिए मैंने ब्राउज़रशॉट्स लिंक को हटा दिया है।

— ओदोडो

क्रिस Coyier के थ्रेड में कोई लिंक जोड़ा गया css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

इस वाक्यविन्यास में से कोई भी नया नहीं है - अधिक लोग आश्चर्यचकित थे कि IE6 ने IE7 + का समर्थन नहीं किया। आप बहुत अधिक सभी CSS2.1 चयनकर्ताओं को IE8 में समर्थन और बाद में मान सकते हैं - IE7 कुछ अस्पष्ट बग के साथ सबसे अधिक करता है। सभी आधुनिक ब्राउज़रों ने कुछ समय के लिए स्तर 3 चयनकर्ताओं का समर्थन किया है , इसके बजाय क्रोम एक छोटी गाड़ी है।

— BoltClock

चूँकि हम विशेषता चयनकर्ताओं के विषय पर हैं, हालांकि, यह ध्यान रखना दिलचस्प है कि स्तर 3 ( और ^=, ) में पेश किए गए विकल्प चयनकर्ता IE7 और IE8 द्वारा भी समर्थित हैं। शायद मानकीकृत होने से पहले उन्हें IE में पेश किया गया था। *=$=

— BoltClock

Answer 3

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

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

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

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

Answer 4

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

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

यहां एट्रीब्यूट सिलेक्टर्स पर कमाल की रीडिंग है

बेला

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>

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

आप यहां विस्तार देख सकते हैं ।

Answer 5

    [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 */
}