क्या कोई CSS चयनकर्ता के बराबर नहीं है?


116

क्या सीएसएस में कुछ ऐसा है! = (बराबर नहीं)? उदाहरण के लिए, मेरे पास निम्नलिखित कोड है:

input {
 ... 
 ...
}

लेकिन कुछ निविष्टियों के लिए मुझे इसे शून्य करने की आवश्यकता है। मैं यह करना चाहता हूं कि इनपुट "जैसे" टैग में वर्ग "रीसेट" जोड़कर

<input class="reset" ... />

और फिर सीएसएस से इस टैग को छोड़ दें।

मैं ऐसा कैसे कर सकता हूं?

एकमात्र तरीका जो मैं देख सकता हूं वह इनपुट टैग में कुछ वर्ग जोड़ने के लिए होगा, और सीएसएस को निम्नानुसार फिर से लिखना होगा:

input.mod {
 ...
 ...
}

आपने अपने प्रश्न का उत्तर दिया, मुझे लगता है। शैली को input.mod में रखें और इच्छित इनपुट टैग में वर्ग 'मॉड' जोड़ें।
नज़्मुल

जवाबों:


157

CSS3 में, आप :not()फ़िल्टर का उपयोग कर सकते हैं , लेकिन सभी ब्राउज़र अभी तक पूरी तरह से CSS3 का समर्थन नहीं करते हैं, इसलिए सुनिश्चित करें कि आप जानते हैं कि आप क्या कर रहे हैं जो अब सभी प्रमुख ब्राउज़रों द्वारा समर्थित है (और काफी समय से है; यह एक पुराना उत्तर है। ...)।

उदाहरण:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

और सीएसएस

input:not(.avoidme) { background-color: green; }

नोट: यह समाधान किसी भी अधिक आवश्यक नहीं होना चाहिए; मैं इसे संदर्भ के लिए यहां छोड़ रहा हूं।

यदि आप CSS3 का उपयोग नहीं करना चाहते हैं, तो आप शैली को सभी तत्वों पर सेट कर सकते हैं, और फिर इसे कक्षा के साथ रीसेट कर सकते हैं।

input { background-color: green; }
input.avoidme { background-color: white; }

OMG ... मुझे पता था कि यह मौजूद है :) हाँ, यह है! धन्यवाद।
एलेक्स इवावसुव

2
मुख्य रूप से IE8 (और पुराने रिलीज) से समर्थन की कमी है। अगर किसी को
पॉलीफिल

1
@ गुरु: आप कई :not()चयनकर्ताओं को श्रृंखलाबद्ध कर सकते हैं : input:not(.avoidme):not(.avoidmetoo)किसी भी वर्ग के तत्वों से बचेंगे , दोनों वर्गों के input:not(.avoidme.andme)तत्वों से बचेंगे ।
टॉमस एशन

1
@TomasLycken, वास्तव में, कई चयनकर्ताओं का उपयोग कर सीएसएस में एक मुश्किल से एक है, जैसे है :not(.this.that) { }मई काम करते हैं, लेकिन अगर आप कुछ इस तरह करते हैं :not(.this, .that) { }आप नीचे गिर जाएगा, तो आप उन्हें इस तरह के रूप डेज़ी श्रृंखला के लिए है: :not(.this):not(.that)। मैं समझता हूं कि आप शायद यह जानते हैं, मैं भविष्य के पाठकों की मदद करने की कोशिश कर रहा हूं :)
कैन ओ 'स्पैम

1
भविष्य के पाठकों के लिए यहाँ एक टिप्पणी छोड़ना: @SamSwift की टिप्पणी अभी भी सटीक है, लेकिन सूचियों के लिए समर्थन भविष्य में आ रहा है (हो सकता है) । अभी के लिए, हालाँकि, केवल एकल चयनकर्ताओं को ही समर्थन दिया गया है :not()
टॉमस असचान

24

आप यह भी कर सकते हैं कि 'reverting' द्वारा केवल CSS में रीसेट वर्ग पर परिवर्तन किया जाए।

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

8

CSS3 में है :not(), लेकिन अभी तक सभी ब्राउज़रों में इसे लागू नहीं किया गया है। यह IE9 प्लेटफ़ॉर्म पूर्वावलोकन में लागू किया गया है, हालांकि।

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

इस बीच, आपको पुराने जमाने के तरीकों से चिपके रहना होगा।


6

आप इस तरह से एक विशेषता को लक्षित करके भी संपर्क कर सकते हैं:

input:not([type=checkbox]){ width:100%; }

इस स्थिति में सभी इनपुट जो 'चेकबॉक्स' प्रकार के नहीं हैं, की चौड़ाई 100% होगी।


4

दिलचस्प सिर्फ JQuery का उपयोग डोम तत्व का चयन करने के लिए यह कोशिश की और यह काम करता है! :)

$("input[class!='bad_class']");

इस पृष्ठ में 168 divs है जिसमें कक्षा 'टिप्पणी-प्रतिलिपि' नहीं है

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

11
[attr!="value"]एक
jQuery-

CSS के साथ इसका क्या करना है?
डेविन कार्नैट

@devlincarnate "CSS" चयनकर्ताओं ने JS ( लगभग 2013 ) में धमाका किया है, इसलिए लोग इसे खोजते हैं।
निक टी

0

वर्ग = "रीसेट" के बजाय आप कक्षा = "मान्य" होने से तर्क को उलट सकते हैं। आप इसे डिफ़ॉल्ट रूप से जोड़ सकते हैं और शैली को रीसेट करने के लिए कक्षा को हटा सकते हैं।

तो आपके उदाहरण और टॉमस से '

input.valid {
 ... 
 ...
}

तथा

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>

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