Selettori CSS: i sei tipi e come combinarli

Un selettore è la parte di una regola CSS che dice a chi applicare lo stile. Vediamo i sei tipi fondamentali, quanto «pesano» (la loro specificità) e come combinarli.

1. I sei tipi di selettore (e la loro specificità)

La specificità si scrive su tre colonne, ID - CLASSE - TIPO (l'abbiamo vista nella pillola sulla cascade). Ecco quanto vale ciascun selettore:

• p h1 tipo (elemento): seleziona per nome del tag → 0-0-1
• .evidenza classe: per l'attributo class → 0-1-0
• #logo id: per l'attributo id (unico nella pagina) → 1-0-0
• [type="email"] attributo: per presenza o valore di un attributo → 0-1-0 (come la classe)
• :hover :first-child pseudo-classe: per uno stato o una posizione (un due punti) → 0-1-0
• ::before ::first-line pseudo-elemento: una parte che non è un vero elemento (due due-punti) → 0-0-1

Poi abbiamo il selettore l'universale *, che seleziona tutto ma la sua specificità è 0-0-0.

Fonte: MDN Web Docs: «CSS selectors and combinators» e «Specificity».

2. I combinatori: le relazioni tra elementi

I combinatori descrivono la posizione di un elemento rispetto a un altro. Ce ne sono quattro:

article p /* ogni <p> dentro un <article> (discendente) */ 

article > p /* solo i <p> figli DIRETTI di <article> (figlio) */ 

h2 + p /* il <p> subito dopo un <h2> (adiacente) */ 

h2 ~ p /* tutti i <p> dopo un <h2> (successivo) */

Nota importante: i combinatori rendono la selezione più precisa, ma non aggiungono peso alla specificità (il peso viene solo dai selettori che collegano).

Fonte: MDN Web Docs: «CSS selectors and combinators» (combinatori discendente, figlio, +, ~).

3. :is(), :where() e :not(): raggruppare e negare

:is(...) significa «uno qualunque tra»: accorcia i selettori lunghi. :not(...) significa «tutti tranne». Entrambi prendono la specificità del loro argomento più forte. :where(...) seleziona esattamente come :is(), ma la sua specificità è sempre zero (0-0-0).

:is(h1, h2, h3) { 
   color: navy; 
} /* invece di h1, h2, h3 { … } */ 

:where(a) { 
   color: blue; 
} /* 0-0-0: facilissimo da sovrascrivere */ 

li:not(:last-child) { 
   border-bottom: 1px solid; 
}

La differenza tra :is() e :where() è solo la specificità: :where() vale zero, ed è perfetto per stili di base (reset, temi, librerie) che vuoi rendere facili da sovrascrivere.

Fonte: MDN Web Docs: pseudo-classi funzionali «:is()», «:where()», «:not()».

In sintesi

Regola pratica: usa il selettore più semplice che funziona, tieni bassa la specificità (:where() è tuo amico) e riserva gli #id ai casi davvero unici. I combinatori e funzioni come :is() servono a scrivere meno e in maniera più chiara.