एक "नहीं बराबर" सीएसएस विशेषता चयनकर्ता नहीं मिल सकता है


103

मैं उन दिव्य तत्वों को लक्षित करना चाहता हूं जहां "फू" का गुण है।

<div foo="x">XXX</div>
<div foo="">YYY</div>

मैंने इस सीएसएस की कोशिश की है, लेकिन यह काम नहीं करता है:

[foo!='']
{
   background: red;
}

जवाबों:


174

इस तरह कोड का उपयोग करें:

div:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}


6

स्वीकृत उत्तर के साथ एक समस्या यह है कि यह उन तत्वों का भी चयन करेगा जिनके पास एक fooविशेषता नहीं है । विचार करें:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div:not([foo=''])पहले और दूसरे दोनों divतत्वों का चयन करेगा । यदि आप केवल उन divतत्वों को चाहते हैं जिनके पास एक विशेषता फू है जो एक खाली स्ट्रिंग पर सेट है, तो आपको उपयोग करना चाहिए:

div[foo]:not([foo=''])

यदि आप सभी तत्वों को विशेषता के साथ चाहते हैं fooजो न तो है , न yही zआपको उपयोग करना चाहिए:

div[foo]:not([foo='y']):not([foo='z'])

1

आप पहले वाले का चयन कर सकते हैं

[foo = 'x']{
  background:red;
}

बेला

इसे पढ़ें


मान लीजिए कि 100 divs हैं जिनमें से foo value अनुपस्थित है (foo = '') 50 divs के लिए और अन्य 50 divs के लिए अलग-अलग foo value कहते हैं foo = x या y आदि तो आपको 50 चयनकर्ताओं को लिखने की जरूरत है यदि हम समाधान का पालन करते हैं
शोएब Chikate

2
यह ऑप चाहता नहीं है: "मैं एक सीएसएस विशेषता चयनकर्ता के साथ केवल निम्नलिखित डिव में से पहले को लक्षित करना चाहता हूं"
सुनील हरि

आपका उत्तर उसकी आवश्यकता के साथ सही है लेकिन सामान्य समाधान नहीं है जो अन्य लोगों ने दिया है।
शोएब चिकते

@ShoaibChikate आप सही हैं। मैं अधिक सामान्य समाधान चाहता हूं। मैंने उस प्रश्न को प्रतिबिंबित करने के लिए अद्यतन किया।
एड्रियन रोसका
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.