मैं उन विशेषताओं के साथ तत्वों को कैसे लक्षित करूं जिनका सीएसएस में कोई मूल्य है?

Question

मुझे पता है कि मैं उन तत्वों को लक्षित कर सकता हूं जिनके पास CSS में एक विशिष्ट विशेषता है, उदाहरण के लिए:

input[type=text]
{
    font-family: Consolas;
}

लेकिन क्या ऐसे तत्वों को लक्षित करना संभव है जिनके पास किसी भी मूल्य की विशेषता है (कुछ भी नहीं है (जब तत्व को जोड़ा नहीं गया है)?

मोटे तौर पर कुछ इस तरह:

a[rel=*]
{
    color: red;
}

जो <a>इस HTML में पहले और तीसरे टैग को लक्षित करना चाहिए :

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

मुझे cursor: pointerलगता है कि यह संभव है क्योंकि डिफ़ॉल्ट रूप से, ऐसा लगता है कि किसी भी <a>टैग पर लागू किया जाता है जिसकी hrefविशेषता के लिए एक मूल्य है ।

Answer 1

निम्नलिखित किसी एंकर टैग को relपरिभाषित विशेषता के साथ मिलान करेगा :

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

---

अपडेट: टिप्पणी अनुभाग में उल्लेख किए गए परिदृश्य @vsync का उल्लेख करने के लिए, (emtpy / गैर-रिक्त मानों के बीच अंतर करना), आप CSS :not छद्म वर्ग को शामिल कर सकते हैं :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Comments

यह खाली मानों को भी लक्षित करता है, और कभी-कभी आप कोई भी मूल्य चाहते हैं , सिवायempty

— vsync

अंतिम उदाहरण होना चाहिएa[rel]:not( [rel=""] )

— कैमरनजोसेवेब

दुर्भाग्य से, notट्रिक नॉन-डायनामिक होने पर समाप्त होती है। मैंने inputफ़ील्ड्स को हाइलाइट करने के लिए ऐसा करने की कोशिश की जब उनके पास मूल्य थे जब उनके पास कोई मूल्य नहीं था, और ऐसा लगता है कि एक बार पृष्ठ लोड होने के बाद, शैली का पुनर्मूल्यांकन नहीं किया जाता है यदि कोई मान टाइप-इन है (या जब यह वहां से शुरू होता है और इसे हटा दिया गया है)।

— क्रिस्टोफर शुल्त्स

Answer 2

हाँ सीएसएस 3 चयनकर्ताओं में कई विशेषता चयनकर्ता हैं ।

उदाहरण के लिए

[att] एट विशेषता के साथ एक तत्व का प्रतिनिधित्व करता है, जो भी विशेषता का मूल्य है।

[att = val] एट विशेषता के साथ एक तत्व का प्रतिनिधित्व करता है जिसका मूल्य बिल्कुल "वैल" है।

[att ~ = val] एट विशेषता के साथ एक तत्व का प्रतिनिधित्व करता है जिसका मूल्य शब्दों की एक व्हाट्सएप-अलग-अलग सूची है, जिनमें से एक बिल्कुल "वैल" है। यदि "वैल" में व्हॉट्सएप शामिल है, तो यह कभी भी किसी चीज का प्रतिनिधित्व नहीं करेगा (क्योंकि शब्द रिक्त स्थान से अलग होते हैं)। इसके अलावा अगर "वैल" खाली स्ट्रिंग है, तो यह कभी भी किसी चीज का प्रतिनिधित्व नहीं करेगा।

[att ^ = val] एट विशेषता के साथ एक तत्व का प्रतिनिधित्व करता है जिसका मूल्य उपसर्ग "वैल" से शुरू होता है। यदि "वैल" खाली स्ट्रिंग है तो चयनकर्ता किसी भी चीज़ का प्रतिनिधित्व नहीं करता है।

[एट $ = वैल] एट विशेषता के साथ एक तत्व का प्रतिनिधित्व करता है जिसका मूल्य प्रत्यय "वैल" के साथ समाप्त होता है। यदि "वैल" खाली स्ट्रिंग है तो चयनकर्ता किसी भी चीज़ का प्रतिनिधित्व नहीं करता है।

[att * = val] एट विशेषता वाले एक तत्व का प्रतिनिधित्व करता है, जिसके मूल्य में विकल्प "वेल" के कम से कम एक उदाहरण हैं। यदि "वैल" खाली स्ट्रिंग है तो चयनकर्ता किसी भी चीज़ का प्रतिनिधित्व नहीं करता है।

Answer 3

यह जोड़ना चाहिए कि यदि कोई ब्राउज़र डिफ़ॉल्ट रूप से एक विशेषता सेट करता है, तो आपको उसके आसपास काम करना पड़ सकता है। यह "आधुनिक" ब्रदर्स में एक मुद्दा प्रतीत नहीं होता है, हालांकि, यह एक ऐसा मुद्दा है जिसे मैंने देखा है, इसलिए क्रॉस-ब्राउज़र प्रदर्शन की जांच करना सुनिश्चित करें।

उदाहरण के लिए, मुझे पता चला कि IE में 9 से पहले, ColSpan को सभी TD की तालिका में सेट किया गया है, इसलिए किसी भी एकल कक्ष में 1 का छिपा हुआ कोल्पान मान है।

इसलिए यदि आप "किसी भी टीडी विद कोल्प्सन एट्रीब्यूट" को टारगेट कर रहे थे, तो आप अपने वेबडॉक में भी लागू कर सकते हैं, यहाँ तक कि td के कोई कोलस्पैन विशेषता सेट नहीं है, जैसे कि किसी भी टीडी का एकल कक्ष होना, सीएसएस स्टाइलिंग को प्राप्त करेगा। IE 9 से कम मूल रूप से उन सभी को शैली देगा!

केवल इस पर चिंता करने का कारण शेष सभी XP उपयोगकर्ता हैं जो IE8 से ऊपर का उन्नयन नहीं कर सकते हैं।

उदाहरण के लिए, मेरे पास तालिकाओं का एक समूह है जहां सामग्री अंत से अंत तक स्थानांतरित हो सकती है, 1 या 7 कोशिकाओं से कहीं भी खाली हो सकती है या तो अंत या शुरुआत में।

मैं कोलस्पैन विशेषता का उपयोग करते हुए अंत में किसी भी रिक्त कोशिकाओं में एक रंग लागू करना चाहता हूं। निम्नलिखित का उपयोग IE में 9 से कम काम नहीं करेगा

#my td[colspan] {background-color:blue;}

... सभी टीडी को स्टाइल मिलेगा (चूंकि सशर्त विशेषता स्टाइल आईई में बेहतर माना गया था, लेकिन मैं पचाता हूं ...)।

सभी ब्राउज़रों में निम्नलिखित कार्यों का उपयोग करते हुए जब मैं किसी एकांत सेल / टीडी के लिए कोलस्पैन के मूल्य को 'एकल' पर सेट करता हूं, तो मैं स्टाइल स्कीम में शामिल करना चाहता हूं, हालांकि यह 'हैक' है और ठीक से मान्य नहीं होगा ...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

वैकल्पिक रूप से आपको अधिक प्रभावी ढंग से सशर्त स्टाइल का उपयोग करके "अगर लेफ्टिनेंट IE 9" को ओवरराइड करने के लिए समस्या का समाधान करने में सक्षम होना चाहिए। यह ऐसा करने का सही तरीका होगा, बस ध्यान रखें कि आपको प्रक्रिया में IElt9 से "ठीक से निर्मित सीएसएस" को छिपाना होगा, और मुझे लगता है कि ऐसा करने का एकमात्र उचित तरीका चयनात्मक शैली की चादरों के साथ है।

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

(btw, colspan अभी css विनिर्देशन में नहीं है [css3 के रूप में], इसलिए यह उदाहरण कोई सत्यापन त्रुटि नहीं फेंकता है।)

Comments

> केवल इस पर चिंता करने का कारण शेष सभी XP उपयोगकर्ता हैं जो IE8 से ऊपर का उन्नयन नहीं कर सकते हैं। आपको लगता है कि, जब तक आप Win8 पर IE8 के साथ एंटरप्राइज़ वातावरण में चलते हैं।

— बॉब