:not() :is() e :where()
Escluda gli elementi con :not(), selezioni qualsiasi elemento di un elenco con :is() e utilizzi :where() per una bassa specificità.
:not() :is() e :where() è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Pseudo-classe :not()
:not(selector) seleziona gli elementi che non corrispondono al selettore indicato. Inverte la selezione.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() con più argomenti
Il CSS moderno consente di inserire più argomenti in :not(): vengono selezionati gli elementi che non corrispondono ad alcuno dei selettori elencati:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Specificità di :not()
La specificità di :not() corrisponde a quella del suo argomento più specifico. :not(.active) ha una specificità a livello di classe (0,1,0).
Pseudo-classe :is()
:is() corrisponde a qualsiasi elemento che corrisponde a uno dei selettori di un elenco. Semplifica il raggruppamento e riduce le ripetizioni.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Specificità di :is()
:is() assume la specificità del suo argomento più specifico. Se l'elenco contiene un selettore ID, l'intera regola ha una specificità a livello di ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Analisi tollerante di :is()
:is() utilizza un'analisi tollerante dei selettori: se un selettore dell'elenco non è valido, viene ignorato senza segnalazioni e gli altri continuano ad applicarsi. I selettori normali separati da virgole falliscono completamente se uno di essi non è valido.
Pseudo-classe :where()
:where() funziona esattamente come :is(), ma ha specificità zero. È progettata per le classi di utilità e gli stili di reset che devono poter essere sovrascritti facilmente.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() per i reset
:where() è ideale per i reset CSS e gli stili di base che non devono mai prevalere nelle competizioni di specificità:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Confronto della specificità
Riepilogo del comportamento della specificità:
:is()— la specificità più alta tra gli argomenti:where()— specificità sempre pari a zero:not()— la specificità più alta tra gli argomenti
Concatenare :is() e :not()
Li combini per creare selettori precisi e leggibili:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Supporto dei browser
:is() e :where() sono supportati da tutti i browser moderni. :not() con più argomenti è supportato dai browser moderni. Eviti di utilizzarli nei progetti che richiedono il supporto di IE11.
Verifica rapida
Quale pseudo-classe ha specificità zero indipendentemente dai suoi argomenti?
Riepilogo
:not() inverte la selezione e accetta più argomenti. :is() corrisponde a uno qualsiasi dei selettori dell'elenco e assume la specificità più alta tra quelli presenti. :where() fa lo stesso, ma con specificità zero: è ideale per i reset. Tutte e tre utilizzano un'analisi tollerante, ignorando senza segnalazioni i selettori non validi.
Domande Frequenti
La lezione «:not() :is() e :where()» è gratuita?
Sì — il testo completo di «:not() :is() e :where()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «:not() :is() e :where()»?
Escluda gli elementi con :not(), selezioni qualsiasi elemento di un elenco con :is() e utilizzi :where() per una bassa specificità. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «:not() :is() e :where()»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e pseudo-classi dello stato dei form