सीएसएस "और" और "या"


113

मुझे काफी बड़ी परेशानी हुई है, क्योंकि मुझे कुछ इनपुट प्रकारों को स्टाइल करने की आवश्यकता है। मेरे पास कुछ ऐसा था:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

लेकिन मैं चेकबॉक्स को स्टाइल भी नहीं करना चाहता।

मैंने कोशिश की:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

कैसे करें इस्तेमाल &&? और मुझे ||जल्द ही उपयोग करने की आवश्यकता होगी , और मुझे लगता है कि उपयोग समान होगा।

अद्यतन:
मैं अभी भी नहीं जानता कि कैसे ||और &&सही ढंग से उपयोग करें । मुझे W3 डॉक्स में कुछ भी नहीं मिला।


17
"अनात्मवाद" Yikes। आप डिवाइन प्रतिशोध के साथ चेकबॉक्स को स्टाइल करने का प्रयास करने वाले लोगों को धमकी देना चाहते हैं? (आप शायद "छूट" या इसी तरह का मतलब है, उदाहरण के लिए, "मैं एक स्टाइल नियम से कुछ इनपुट प्रकारों की छूट की जरूरत है।")
टीजे क्राउडर

3
खैर, मैं अपनी भाषा से क्रियात्मक क्रिया का अच्छा अनुवाद नहीं कर पाया;)
मिसिर

4
मुझे लगता है कि @ टीजे क्राउडर शायद यह समझ गए थे। लेकिन यह मज़ेदार था ... ख़ासकर उसकी गलत वर्तनी 'ईश्वरीय' = डी
डेविड

महान ngram , यद्यपि। ; ^)
रफिन

जवाबों:


141

&& स्ट्रिंगर द्वारा एक साथ कई चयनकर्ताओं द्वारा काम करना जैसे -

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

एक और उदाहरण:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| कई चयनकर्ताओं को अल्पविराम से अलग करके काम करता है जैसे:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

1
ठीक है, प्रकाश के लिए धन्यवाद। मुझे स्टाइलिंग फॉर्म से नफरत है, लेकिन यह मेरा काम है, और साइट मेरी नहीं है। मैं इनपुट्स पर कक्षाएं लगाऊंगा।
मिसिर

5
यहाँ पर Internet Explorer का समर्थन करने का एक उपयोगी चार्ट दिया गया है: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee

12
आईई अब कौन इस्तेमाल करता है :)
तरुण

2
notIE9 से आगे काम करने लगता है (@geofflee द्वारा दिए गए चार्ट के लिए धन्यवाद)।
शार्प

1
क्या हम वास्तव में 2018 में IE के पुराने संस्करणों का समर्थन करने से चिंतित हैं? Microsoft भी नहीं करता।
विसंगति

48

और ( &&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

या ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])

नहीं, असफल भी। यह 1 से 2 और 2 से 1
मिसिर

@ केनीटीएम: देखिए। अल्पविराम का उपयोग कुछ इस तरह करेगा: .registration_form_right इनपुट: नहीं ([प्रकार = "रेडियो"]) चेकबॉक्स सहित सब कुछ पर लागू होगा, और .registration_form_right इनपुट: नहीं ([प्रकार = "चेकबॉक्स"]) सब कुछ पर लागू होगा, जिसमें शामिल है रेडियो
मिसिर

@ मिसूर: बिल्कुल। दूसरा "या" (उर्फ ||) मामले के लिए है। स्पष्ट करने के लिए अद्यतन किया गया।
kennytm

1
@ केनीटीएम: क्या मिस्सुर कहने की कोशिश कर रहा है ... आपका "|| उदाहरण वाक्यविन्यास रूप से सही है, लेकिन यदि आप अभिव्यक्ति को सरल करते हैं, तो यह सिर्फ ".registration_form_right इनपुट" बन जाता है क्योंकि दो चयनकर्ताओं के संघ में सभी इनपुट शामिल हैं।
जियोफली

@geo, @Mis: देखो, सवाल पूछा गया "मुझे जल्द ही उपयोग करने की आवश्यकता होगी", इसलिए यह ||उदाहरणों से बाहर का निर्माण करने का एक तरीका है । बेशक यह हो जाता है .registration_form_right inputसरलीकरण के बाद, लेकिन सार है आप का उपयोग ,के रूप में|| । आप input:not([type="radio"]), input:not([name="foo"])एक nontrivial उदाहरण के लिए उपयोग कर सकते हैं ।
kennytm

16

एक तत्व के गुणों aऔर bका चयन करने के लिए X:

X[a][b]

गुण का चयन करने aया bएक के Xतत्व:

X[a],X[b]

4

:notछद्म वर्ग आईई द्वारा समर्थित नहीं है। मुझे इसके बदले कुछ इस तरह मिला होगा:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

कुछ नकल वहाँ, लेकिन यह उच्च संगतता के लिए भुगतान करने के लिए एक छोटी सी कीमत है।


2

आप किसी भी तरह से "और" के प्रयोग को पुन: पेश कर सकते हैं और: नहीं।

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

2
क्षमा करें,: नहीं (: नहीं) वैध सीएसएस सिंटैक्स नहीं है। हालांकि यह jQuery के साथ काम करता है।
सर्ज प्रोफैफलेबुक 12

1

मुझे लगता है कि आप अधिक चयनकर्ताओं को लिखने से नफरत करते हैं और उन्हें अल्पविराम से विभाजित करते हैं?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

और यह BTW

not([type="radio" && type="checkbox"])  

मुझे अधिक पसंद है "इनपुट जो इन दोनों प्रकारों में नहीं है" :)


2
यही कारण है कि काम नहीं होता है, क्योंकि पहली चयनकर्ता सभी गैर का चयन करेंगे radio, (लेकिन होता चयन checkbox), और दूसरा रिवर्स करना होगा। दोनों के मिलन में दोनों शामिल होंगे checkbox और radio
एरिक

यह पहला उदाहरण नहीं होगा और उन्हें एक साथ & quot; यह उन इनपुट के लिए आग लगाएगा जो पहले चयनकर्ता के लिए रेडियो नहीं हैं, और इनपुट जो चेकबॉक्स नहीं हैं, जिसका अर्थ है सभी इनपुट :-)
डैन एफ

तुम गलत हो। फिर, पहले एक दूसरे पर लागू होगा, और दूसरा, पहले पर।
मिसिर

1

बस अगर कोई मेरी तरह फंस जाए तो। हालांकि जाने के बाद पोस्ट और कुछ हिट और ट्रायल ने मेरे लिए काम किया।

input:not([type="checkbox"])input:not([type="radio"])

1

चेतावनी। एक साथ कई notचयनकर्ताओं को स्ट्रिंग करने से परिणामी चयनकर्ता की विशिष्टता बढ़ जाती है, जिससे इसे ओवरराइड करना कठिन हो जाता है: आपको मूल रूप से चयनकर्ता को सभी नोटों के साथ ढूंढना होगा और इसे अपने नए चयनकर्ता में कॉपी-पेस्ट करना होगा।

एक not(X or Y)चयनकर्ता विशिष्टता को बढ़ाने से बचने के लिए बहुत अच्छा होगा, लेकिन मुझे लगता है कि हमें इस उत्तर की तरह, विपरीतताओं के संयोजन के लिए रहना होगा ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.