Posso scrivere un selettore CSS selezionando elementi NON aventi una determinata classe o attributo?

646

Vorrei scrivere una regola di selezione CSS che seleziona tutti gli elementi che non hanno una determinata classe. Ad esempio, dato il seguente 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>

Vorrei scrivere un selettore che seleziona tutti gli elementi che non hanno la classe "stampabile" che, in questo caso, sono la navigazione e un'elementi.

È possibile?

NOTA: nell'attuale HTML dove vorrei usarlo, ci saranno molti più elementi che non hanno la classe "stampabile" di quanto non faccia (mi rendo conto che è il contrario nell'esempio sopra).

html  css  css-selectors 
— David Nordvall
fonte

Risposte:

900

In genere aggiungi un selettore di classe alla :not()pseudo-classe in questo modo:

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

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

Ma se avete bisogno di un migliore supporto del browser (IE8 e meno recenti non supportano :not()), si è probabilmente meglio la creazione di regole di stile per gli elementi che fare avere la classe "stampabile". Se anche ciò non è fattibile nonostante ciò che dici sul tuo markup effettivo, potresti dover aggirare il markup su quella limitazione.

Tenete presente che, a seconda delle proprietà che si sta impostando in questa regola, alcuni di loro può sia essere ereditato dai discendenti che sono .printable , o comunque li riguardano un modo o nell'altro. Ad esempio, sebbene displaynon sia ereditato, l'impostazione display: nonesu a :not(.printable)impedirà la visualizzazione di tutti i suoi discendenti, poiché rimuove completamente l'elemento e la sua sottostruttura dal layout. Spesso puoi aggirare questo usando visibility: hiddeninvece che consentirà di mostrare i discendenti visibili, ma gli elementi nascosti influenzeranno comunque il layout come in origine. In breve, stai solo attento.

— BoltClock
fonte
4
Come un piccolo nugget di informazioni, il supporto del browser per gli aspetti agnostici dei media dei CSS è spesso lo stesso per tutti i tipi di media: se un browser non supporta :not()lo schermo, non lo supporta nemmeno nella stampa.
— BoltClock
19
Si noti che :not()accetta solo un selettore semplice, il che significa che non può contenere selettori nidificati come :not(div .printable)- vedi sintassi del selettore W3C
— Steve Eynon
1
Ho appena provato per .active a: not (.active a) non ha funzionato per me. Ma a: not (.active) ha fatto!
— user2367418
Quando dici che non ha funzionato per te, probabilmente intendi che non ha funzionato per te , giusto? Ciò non significa che non funzioni, probabilmente è un caso di specificità: le proprietà nella :not(.active)regola potrebbero essere state semplicemente sostituite da proprietà nelle regole con priorità più elevata.
— AMN
1
@Kilves: Ne sei sicuro? La specificità di :not()è quella del suo argomento, il che significa che :not(div)è ugualmente specifico per div, :not(.cls)per .clse :not(#id)per #id.
— BoltClock
180 
:not([class])

In realtà, questo selezionerà tutto ciò a cui non è class="css-selector"applicata una classe CSS ( ).

Ho fatto una demo di 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>
Espandi frammento

Questo è supportato? Sì: Caniuse.com (accesso 02 gennaio 2020) :

  • Supporto: 98,74%
  • Supporto parziale: 0,1%
  • Totale: 98,84%

Modifica divertente, stavo cercando su Google l'opposto di: no. Negazione CSS?

selector[class]  /* the oposite of :not[]*/
— Milche Patern
fonte
109

La :notpseudo classe di negazione

La pseudo-classe CSS di negazione :not(X), è una notazione funzionale che prende un semplice selettore X come argomento. Corrisponde a un elemento che non è rappresentato dall'argomento. X non deve contenere un altro selettore di negazione.

È possibile utilizzare :notper escludere qualsiasi sottoinsieme di elementi corrispondenti, ordinati come normali selettori CSS.

Esempio semplice: escluso per classe

div:not(.class)

Seleziona tutti gli divelementi senza la classe.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Espandi frammento

Esempio complesso: escluso per tipo / gerarchia

:not(div) > div

Seleziona tutti gli divelementi che non sono figli di un altrodiv

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
Espandi frammento

Esempio complesso: concatenare pseudo-selettori

Con la notevole eccezione di non essere in grado di concatenare / annidare :notselettori e pseudo elementi, è possibile utilizzare in combinazione con altri pseudo selettori.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
Espandi frammento

Supporto browser , ecc.

:notè un selettore di livello CSS3 , la principale eccezione in termini di supporto è che è IE9 +

Le specifiche sottolineano anche un punto interessante:

lo :not()pseudo consente di scrivere selettori inutili. Ad esempio :not(*|*), che non rappresenta alcun elemento o foo:not(bar), che è equivalente fooma con una specificità superiore.

— SW4
fonte
3
Quella cena fu una risposta ben documentata e ben esemplificata! #thumbsup
— Jonathan Bredo Christensen,
Ok, il tuo esempio :not(div) > divfunzionerebbe solo con genitori diretti. E gli altri nonni?
— FindOut_Quran,
Informazioni fantastiche! Proprio quello di cui avevo bisogno! Grazie!
— Jamie,
9

Proprio come per contribuire al fatto che le risposte di cui sopra di: not () possono essere molto efficaci in forme angolari, piuttosto che creare effetti o regolare la vista / DOM, 

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

Garantisce che durante il caricamento della pagina, i campi di input mostrino i valori non validi (bordi o sfondi rossi, ecc.) Se sono stati aggiunti dati (ovvero non più intatti) ma non sono validi.

— BaneStar007
fonte
7

Esempio

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

// Opacità 0,6 tutto "sezione-" ma non "nome-sezione"

— Hakan
fonte
2

È possibile utilizzare il :not(.class)selettore come indicato in precedenza.

Se ti interessa la compatibilità di Internet Explorer, ti consiglio di utilizzare http://selectivizr.com/ .

Ma ricorda di eseguirlo sotto apache altrimenti non vedrai l'effetto.

— MelkorNemesis
fonte
3
Cosa intendi per eseguirlo sotto apache? Selectivizr è una
— libreria
Esegue una richiesta Ajax - che non funziona senza un server http.
— MelkorNemesis,
2

Utilizzando la :not()pseudo classe:

Per selezionare tutto tranne un determinato elemento (o elementi). Possiamo usare la :not() pseudo classe CSS . La :not()pseudo classe richiede un CSSselettore come argomento. Il selettore applicherà gli stili a tutti gli elementi ad eccezione degli elementi specificati come argomento.

Esempi:

/* 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>
Espandi frammento

Possiamo già vedere il potere di questa pseudo classe, ci consente di mettere a punto i nostri selettori in modo conveniente escludendo determinati elementi. Inoltre, questa pseudo classe aumenta la specificità del selettore . Per esempio:

/* 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>
Espandi frammento

— Willem van der Veen
fonte
0

Se si desidera che un menu di classe specifico abbia un CSS specifico se la classe mancante ha effettuato l'accesso :

body:not(.logged-in) .menu  {
    display: none
}
— Mihai
fonte
-1

Come altri hanno detto, semplicemente: no (.class). Per i selettori CSS, consiglio di visitare questo link, è stato molto utile durante il mio viaggio: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

La pseudo classe di negazione è particolarmente utile. Diciamo che voglio selezionare tutti i div, tranne quello che ha un id di contenitore. Lo snippet sopra gestirà perfettamente tale compito.

Oppure, se volessi selezionare ogni singolo elemento (non consigliato) ad eccezione dei tag di paragrafo, potremmo fare:

*:not(p) {
  color: green;
}
— HBhering
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.