क्या: नहीं () छद्म वर्ग के कई तर्क हो सकते हैं?

Question

मैं चयन करने के लिए कोशिश कर रहा हूँ inputसभी के तत्वों typeको छोड़कर रों radioऔर checkbox।

बहुत से लोगों ने दिखाया है कि आप कई तर्क दे सकते हैं :not, लेकिन typeमैं किसी भी तरह से काम करने की कोशिश नहीं करता।

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

कोई विचार?

Comments

"कई लोगों ने दिखाया है कि आप कई तर्क दे सकते हैं: नहीं" या तो वे लोग एक निश्चित लेख को उद्धृत कर रहे थे जो कि लोकप्रिय रूप से संदर्भित है लेकिन गंभीर रूप से भ्रामक है, या वे सीएसएस नहीं बल्कि jQuery के बारे में बात कर रहे थे। ध्यान दें कि चयनित चयनकर्ता वास्तव में jQuery में मान्य है, लेकिन CSS में नहीं। : मैंने लिखा एक क्यू एंड ए मतभेद का ब्यौरा stackoverflow.com/questions/10711730/... (उत्तर भी पक्ष पर उस लेख का उल्लेख है)

— BoltClock

बधाई हो! आधिकारिक संस्करण से बाहर आने से पहले आपने 2 साल से ऊपर अपने उदाहरण में सफलतापूर्वक CSS4.0 लिखा है।

— जैक गिफिन

@ जैक गिफिन: आप किस "आधिकारिक संस्करण" का जिक्र कर रहे हैं? यह सवाल केवल 5 महीने के चयनकर्ताओं -4 के FPWD को पूर्व-दिनांकित करता है, और कल्पना अभी भी पूरी होने के आस-पास है: w3.org/TR/2011/WD-selectors4-20110929/#negation और यह पहले से लागू होने की पूर्व-तिथि है 4 और एक साल आधा : stackoverflow.com/questions/35993727/...

— BoltClock

Answer 1

क्यों: न सिर्फ दो का उपयोग करें :not:

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

_{हां, यह जानबूझकर है}

Comments

इसकी एक उच्च विशिष्टता है।

— अंडरस्ट्रेक्शन

हास्य नहीं पाने वालों के लिए: उन्होंने कहा कि "क्यों नहीं ..." :चरित्र के साथ ।

— टोटमेडली

एक साइड नोट के रूप में, यदि आप ऐसा कुछ करते हैं, तो आप input:not('.c1'), input:not('c2')एक "और" स्थिति के साथ समाप्त होते हैं, जहां दोनों वर्गों को इसके मिलान के लिए इनपुट पर होना होगा।

— क्लाउडकिलर

@BoltClock विलंबित, लेकिन, इसलिए :not([attr],[attr])CSV प्रारूप के लिए भी इच्छा :-P

— TylerH

@Cloudkiller कोई भी इनपुट तत्व का चयन नहीं करेगा -> "क्लास सी 1 के बिना इनपुट या क्लास सी 2 के बिना इनपुट"

— डेविड कॉलानन

Answer 2

यदि आप अपने प्रोजेक्ट में SASS का उपयोग कर रहे हैं, तो मैंने इस मिक्सिन को बनाया है ताकि यह काम कर सके जिस तरह से हम यह चाहते हैं:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

इसे 2 तरीकों से इस्तेमाल किया जा सकता है:

विकल्प 1: इनलाइन किए गए आइटम को इनलाइन सूचीबद्ध करें

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

विकल्प 2: पहले किसी आइटम को अनदेखा करें

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

आउटपुट सीएसएस या तो विकल्प के लिए

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

Comments

क्या वह लकड़हारा अपनी लकड़ी पाने के बजाय किसी हार्डवेयर स्टोर पर जाने के लिए नहीं कह रहा है?

— ओसिरिसगोत्रा

क्या? इसलिए आप .selector लिखना चाहेंगे: नहीं (.one): नहीं (.two): नहीं (.three: नहीं: (.four) {...} से .selector {@include नहीं ('एक', ')। ।दो तीन चार') { ... } } ?

— डैनियल टोनन

दक्षता के संदर्भ में: हाँ। कम 'वर्ण और इमो अधिक कुशल कोड।

— दान

:not()= प्रति आइटम 6 वर्ण; '',= 3 आइटम प्रति आइटम। @includeएक गर्म कुंजी को सौंपा जाना चाहिए ताकि मैं एक चरित्र के रूप में गिना जाऊं (टाइप करने के मामले में)। तकनीकी रूप से मुझे नहीं लगता कि आपको सूची में एकल उद्धरण चिह्नों का उपयोग करने की आवश्यकता है यदि आप उनसे बहुत अधिक नफरत करते हैं। हालांकि वे संपादकों को बाहर निकलने से रोकने में मदद करते हैं। उसके आधार पर, मुझे अभी भी लगता है कि मेरा तरीका इसे लिखने का अधिक कुशल तरीका है।

— डैनियल टोनन

@DanHeskes भी लिखते हैं कि सभी: नहीं () मामलों को आप उन्हें सूचीबद्ध करने के लिए एक चर का उपयोग करने की अनुमति नहीं देते हैं।

— plong0

Answer 3

CSS चयनकर्ताओं 4 से शुरू होकर :notचयनकर्ता में कई तर्कों का उपयोग करना संभव हो जाता है ( यहाँ देखें )।

CSS3 में,: चयनकर्ता केवल तर्क के रूप में 1 चयनकर्ता को अनुमति नहीं देता है। स्तर 4 चयनकर्ताओं में, यह एक तर्क के रूप में चयनकर्ता सूची ले सकता है।

उदाहरण:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

दुर्भाग्य से, ब्राउज़र समर्थन सीमित है । अभी के लिए, यह केवल सफारी में काम करता है।

Comments

caniuse.com के अनुसार , यह अभी भी केवल सफारी द्वारा समर्थित है

— निंदा

अपने CSS Selectors Level 4 को ध्यान में रखें, CSS 4 को नहीं, CSS 4 जैसी कोई चीज नहीं है और शायद यह कभी मौजूद नहीं होगी।

— एडू रुइज

Answer 4

मुझे इससे कुछ परेशानी हो रही थी, और "X: not (): not ()" विधि मेरे लिए काम नहीं कर रही थी।

मैंने इस रणनीति का सहारा लिया:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

यह लगभग मज़ेदार नहीं है, लेकिन यह मेरे लिए तब काम करता है जब: नहीं () अजीब था। यह आदर्श नहीं है, लेकिन यह ठोस है।

Answer 5

यदि आप "सीएसएसएनएक्सएक्सएक्स" पोस्ट सीएसएस प्लगइन स्थापित करते हैं , तो आप सुरक्षित रूप से उस सिंटैक्स का उपयोग करना शुरू कर सकते हैं जिसे आप अभी उपयोग करना चाहते हैं।

Cssnext का उपयोग करने से यह बंद हो जाएगा:

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

इस मामले में:

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class