क्या मैं एक सीएसएस चयनकर्ता चुन सकता हूँ तत्वों का चयन करने के लिए एक निश्चित वर्ग या विशेषता नहीं है?

643

मैं एक सीएसएस चयनकर्ता नियम लिखना चाहता हूं जो उन सभी तत्वों का चयन करता है जिनके पास एक निश्चित वर्ग नहीं है। उदाहरण के लिए, निम्नलिखित HTML दिया गया:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

मैं एक चयनकर्ता लिखना चाहूंगा जो उन सभी तत्वों का चयन करता है जिनके पास "मुद्रण योग्य" वर्ग नहीं है, जो इस मामले में, नौसेना और एक तत्व हैं।

क्या यह संभव है?

नोट: वास्तविक HTML जहां मैं इस का उपयोग करना चाहते है, अभी भी बहुत सा तत्व है कि होने जा रहे हैं नहीं है की तुलना में "प्रिंट करने योग्य" वर्ग (मुझे पता है यह ऊपर के उदाहरण में दूसरी तरह के आसपास है) है।

html css css-selectors

— डेविड नॉर्डवाल
स्रोत

895

आमतौर पर आप :not()छद्म वर्ग के लिए एक वर्ग चयनकर्ता को जोड़ते हैं :

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

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

ध्यान रखें कि, इस नियम में आपके द्वारा निर्धारित गुणों के आधार पर, उनमें से कुछ या तो वंशजों द्वारा विरासत में प्राप्त किए जा सकते हैं .printable , या अन्यथा उन्हें एक या दूसरे तरीके से प्रभावित कर सकते हैं। उदाहरण के लिए, हालांकि displayविरासत में नहीं मिला है, display: noneएक :not(.printable)वसीयत पर सेट करने से यह और इसके सभी वंशजों को प्रदर्शित होने से रोका जाएगा, क्योंकि यह तत्व और इसके उपप्रकार को लेआउट से पूरी तरह से हटा देता है। आप अक्सर visibility: hiddenइसके बजाय इसका उपयोग करके प्राप्त कर सकते हैं जो दृश्यमान वंशज को दिखाने की अनुमति देगा, लेकिन छिपे हुए तत्व अभी भी लेआउट को प्रभावित करेंगे क्योंकि वे मूल रूप से करते थे। संक्षेप में, बस सावधान रहें।

— बोल्टकॉक
स्रोत

4

जानकारी की एक छोटी सी डली के रूप में, CSS के मीडिया-अज्ञेय पहलुओं के लिए ब्राउज़र समर्थन अक्सर मीडिया प्रकारों में समान होता है - यदि कोई ब्राउज़र :not()स्क्रीन पर समर्थन नहीं करता है , तो यह प्रिंट में भी समर्थन नहीं करेगा।

— BoltClock

19

ध्यान दें कि :not()केवल एक साधारण चयनकर्ता लेता है, जिसका अर्थ है कि इसमें नेस्टेड चयनकर्ता शामिल नहीं हो सकते हैं जैसे :not(div .printable)- W3C चयनकर्ता वाक्यविन्यास

— स्टीव इयोन

1

मैंने इसे केवल .active के लिए आज़माया: a (.active) a ने मेरे लिए काम नहीं किया। लेकिन, a: not (.active) ने किया!

— user2367418

जब आप कहते हैं कि यह आपके लिए काम नहीं करता है, तो आप शायद इसका मतलब है कि यह आपके लिए काम नहीं करता है , है ना? इसका मतलब यह नहीं है कि यह काम नहीं करता है, यह शायद विशिष्टता का मामला है - आपके :not(.active)शासन में संपत्तियां उच्च प्राथमिकता के साथ नियम (संपत्तियों) में संपत्तियों से अधिक हो सकती हैं।

— अमन

1

@ बाल्स: क्या आप इसके बारे में निश्चित हैं? की विशिष्टता :not()है अपने तर्क है, जो साधन की है कि :not(div)समान रूप से के लिए विशिष्ट है div, :not(.cls)करने के लिए .clsऔर :not(#id)करने के लिए #id।

— BoltClock

179

:not([class])

दरअसल, यह ऐसी किसी भी चीज का चयन करेगा जिसके पास कोई css क्लास ( class="css-selector") नहीं है।

मैंने एक jsfiddle डेमो बनाया

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}

    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

स्निपेट का विस्तार करें

क्या यह समर्थित है? हाँ: Caniuse.com (02 जनवरी 2020 तक पहुँचा) :

समर्थन: 98.74%
आंशिक समर्थन: 0.1%
कुल: 98.84%

मजेदार संपादन, मैं इसके विपरीत के लिए Googling था: नहीं। सीएसएस नकार?

selector[class]  /* the oposite of :not[]*/

— मिल्की पैटरन
स्रोत

109

`:not`निषेध छद्म वर्ग

नकारात्मक सीएसएस छद्म वर्ग, :not(X)एक तर्क के रूप में एक साधारण चयनकर्ता एक्स को लेने वाला एक कार्यात्मक संकेतन है। यह एक ऐसे तत्व से मेल खाता है जो तर्क से प्रतिनिधित्व नहीं करता है। एक्स में एक और नकारा चयनकर्ता नहीं होना चाहिए।

आप :notमिलान किए गए तत्वों के किसी भी सबसेट को बाहर करने के लिए उपयोग कर सकते हैं , जैसा कि आप सीएसएस चयनकर्ताओं को सामान्य करेंगे।

सरल उदाहरण: वर्ग द्वारा छोड़कर

div:not(.class)

divवर्ग के बिना सभी तत्वों का चयन करेंगे.class

div:not(.class) {
  color: red;
}

<div>Make me red!</div>
<div class="class">...but not me...</div>

स्निपेट का विस्तार करें

जटिल उदाहरण: प्रकार / पदानुक्रम को छोड़कर

:not(div) > div

उन सभी divतत्वों का चयन करेंगे जो दूसरे के बच्चों को कहते हैंdiv

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

स्निपेट का विस्तार करें

जटिल उदाहरण: छद्म चयनकर्ताओं का पीछा करना

चेन / घोंसले के :notचयनकर्ताओं और छद्म तत्वों में सक्षम नहीं होने के उल्लेखनीय अपवाद के साथ , आप अन्य छद्म चयनकर्ताओं के साथ संयोजन में उपयोग कर सकते हैं।

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

स्निपेट का विस्तार करें

ब्राउज़र समर्थन , आदि।

:notएक है CSS3 के स्तर चयनकर्ता , समर्थन के मामले में मुख्य अपवाद है कि यह है IE9 +

युक्ति एक दिलचस्प बिंदु भी बनाती है:

:not()छद्म बेकार चयनकर्ताओं लिखे जाने की अनुमति देता है। उदाहरण के लिए :not(*|*), जो किसी भी तत्व का प्रतिनिधित्व नहीं करता है, या foo:not(bar), जो fooएक उच्च विशिष्टता के साथ बराबर है ।

— SW4
स्रोत

3

यह एक अच्छी तरह से प्रलेखित और अच्छी तरह से जांच किया गया जवाब था! # थम्सअप

— जोनाथन

ठीक है, आपका उदाहरण :not(div) > divकेवल प्रत्यक्ष माता-पिता के साथ काम करेगा। अन्य दादाजी के बारे में क्या?

— FindOut_Quran

बहुत बढ़िया जानकारी! मुझे जिस चीज की जरूरत थी! धन्यवाद!

— जेमी

22

मुझे लगता है कि यह काम करना चाहिए:

:not(.printable)

से "नकारात्मक सीएसएस चयनकर्ता" जवाब ।

— Eregrith
स्रोत

9

जैसे योगदान करने के लिए कि उपरोक्त उत्तर: नहीं () कोणीय रूपों में बहुत प्रभावी हो सकता है, न कि प्रभाव बनाने या दृश्य को समायोजित करने के लिए / DOM,

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

यह सुनिश्चित करता है कि आपके पृष्ठ को लोड करने पर, इनपुट फ़ील्ड केवल अमान्य (लाल सीमाएँ या पृष्ठभूमि, आदि) दिखाएगी यदि उनके पास डेटा जोड़ा गया है (अर्थात अब प्राचीन नहीं है) लेकिन अमान्य हैं।

— BaneStar007
स्रोत

7

उदाहरण

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// अपारदर्शिता 0.6 सभी "अनुभाग-" लेकिन "अनुभाग-नाम" नहीं

— हकान
स्रोत

2

आप :not(.class)पहले बताए अनुसार चयनकर्ता का उपयोग कर सकते हैं ।

यदि आप इंटरनेट एक्सप्लोरर संगतता के बारे में परवाह करते हैं तो मैं आपको http://selectivizr.com/ का उपयोग करने की सलाह देता हूं ।

लेकिन इसे अपाचे के तहत चलाने के लिए याद रखें अन्यथा आप प्रभाव नहीं देखेंगे।

— MelkorNemesis
स्रोत

3

अपाचे के तहत इसका क्या मतलब है? Selectivizr एक फ्रंट एंड लिब है, इसका सर्वर सॉफ्टवेयर से कोई लेना-देना नहीं है

— Kloar

यह अजाक्स अनुरोध करता है - जो बिना http सर्वर के काम नहीं करता है।

— मेल्कोरनेमिस

2

`:not()`छद्म वर्ग का उपयोग करना :

सब कुछ चुनने के लिए लेकिन एक निश्चित तत्व (या तत्व)। हम :not() CSS छद्म वर्ग का उपयोग कर सकते हैं । :not()छद्म वर्ग एक की आवश्यकता है CSSअपने तर्क के रूप में चयनकर्ता। चयनकर्ता उन तत्वों को छोड़कर सभी तत्वों पर शैलियों को लागू करेगा जो एक तर्क के रूप में निर्दिष्ट हैं।

उदाहरण:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}

<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

स्निपेट का विस्तार करें

हम पहले से ही इस छद्म वर्ग की शक्ति को देख सकते हैं, यह हमें कुछ तत्वों को छोड़कर हमारे चयनकर्ताओं को आसानी से ठीक करने की अनुमति देता है। इसके अलावा, यह छद्म वर्ग चयनकर्ता की विशिष्टता को बढ़ाता है । उदाहरण के लिए:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}

<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

स्निपेट का विस्तार करें

— विलेम वैन डेर वेन
स्रोत

0

यदि आप चाहते हैं कि विशिष्ट वर्ग मेनू में विशिष्ट सीएसएस हो तो लापता वर्ग लॉग-इन :

body:not(.logged-in) .menu  {
    display: none
}

— मिहाई
स्रोत

-1

जैसा कि अन्य लोगों ने कहा, आप सीधे शब्दों में कहें: नहीं (.class)। CSS चयनकर्ताओं के लिए, मैं इस लिंक पर जाने की सलाह देता हूं, यह मेरी पूरी यात्रा में बहुत मददगार रहा है: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

नकारात्मक छद्म वर्ग विशेष रूप से सहायक है। मान लीजिए कि मैं कंटेनर के एक आईडी को छोड़कर सभी divs का चयन करना चाहता हूं। ऊपर दिए गए स्निपेट उस कार्य को पूरी तरह से संभाल लेंगे।

या, यदि मैं अनुच्छेद टैग के अलावा हर एक तत्व (सलाह नहीं) का चयन करना चाहता था, तो हम कर सकते थे:

*:not(p) {
  color: green;
}

— HBhering
स्रोत

क्या मैं एक सीएसएस चयनकर्ता चुन सकता हूँ तत्वों का चयन करने के लिए एक निश्चित वर्ग या विशेषता नहीं है?

:notनिषेध छद्म वर्ग

सरल उदाहरण: वर्ग द्वारा छोड़कर

जटिल उदाहरण: प्रकार / पदानुक्रम को छोड़कर

जटिल उदाहरण: छद्म चयनकर्ताओं का पीछा करना

ब्राउज़र समर्थन , आदि।

:not()छद्म वर्ग का उपयोग करना :

उदाहरण:

`:not`निषेध छद्म वर्ग

`:not()`छद्म वर्ग का उपयोग करना :