Guida CSS interattiva: Pseudo-classi

Q: Come funziona nth-child in CSS?

:nth-child(an+b) seleziona gli elementi la cui posizione tra i fratelli è a×n+b per n = 0, 1, 2 e così via, contando da 1. :nth-child(3) è il terzo figlio, :nth-child(odd) o 2n+1 ogni figlio dispari, e :nth-child(n+4) dal quarto in poi.

Q: Qual è la differenza tra nth-child e nth-of-type?

:nth-child() conta tutti gli elementi fratelli, poi controlla il resto del selettore; :nth-of-type() conta solo i fratelli dello stesso tipo di elemento. In un elenco con un h2 seguito da paragrafi, p:nth-child(1) non seleziona niente mentre p:nth-of-type(1) seleziona il primo paragrafo.

Q: Come si usa :not() in CSS?

Metti tra le parentesi il selettore da escludere: li:not(.done) seleziona ogni elemento della lista senza la classe done. Accetta anche un elenco, input:not([type="checkbox"], [type="radio"]).

Q: Qual è la differenza tra pseudo-classe e pseudo-elemento?

Una pseudo-classe (due punti singoli, :hover) seleziona un intero elemento esistente in un certo stato. Uno pseudo-elemento (due punti doppi, ::before) si riferisce a una parte di un elemento o crea contenuto generato.

Cos'è una pseudo-classe

Una pseudo-classe è una parola chiave dopo i due punti che seleziona gli elementi in base alla loro posizione nel documento o al loro stato. La attacchi a un selettore normale: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Le pseudo-classi di stato per i link e il mouse (:hover, :active, :visited) hanno una pagina tutta loro, CSS hover.

:nth-child() e la formula an+b

:nth-child() accetta un numero, una parola chiave o una formula an+b. Il browser prova n = 0, 1, 2, ... e seleziona ogni posizione prodotta dalla formula (le posizioni partono da 1).

Formula	Posizioni selezionate	Significato
`3`	3	Il terzo figlio
`odd` o `2n+1`	1, 3, 5, ...	Righe dispari
`even` o `2n`	2, 4, 6, ...	Righe pari
`3n`	3, 6, 9, ...	Uno ogni tre
`n+4`	4, 5, 6, ...	Dal quarto in poi
`-n+3`	1, 2, 3	I primi tre
`3n+1`	1, 4, 7, ...	Uno ogni tre, partendo dal primo

Scrivi una formula e guarda quali elementi vengono selezionati:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Prova odd, even, 4, n+7, -n+5 e 2n+3. Una formula non valida non seleziona niente.

La gemella che conta dalla fine è :nth-last-child(): li:nth-last-child(-n+2) seleziona gli ultimi due elementi.

nth-child contro nth-of-type

:nth-child() conta ogni elemento fratello, qualunque sia il suo tag, e solo dopo controlla il resto del selettore. :nth-of-type() conta solo i fratelli con lo stesso tag. La differenza si vede appena i fratelli sono misti:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Le stesse coppie esistono per le estremità: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() e :where()

Pseudo-classe	Esempio	Seleziona
`:not(X)`	`li:not(.done)`	Gli elementi che non corrispondono a X
`:is(X, Y)`	`:is(h1, h2, h3) a`	Gli elementi che corrispondono a uno qualsiasi dell'elenco
`:where(X, Y)`	`:where(ul, ol) li`	Come `:is()`, con specificità zero
`:has(X)`	`li:has(> input:checked)`	Gli elementi che contengono una corrispondenza per X

:not() è quella che si usa ogni giorno, per esempio per mettere un separatore tra gli elementi ma non dopo l'ultimo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Pseudo-classi di stato: focus, checked, disabled, invalid

Pseudo-classe	Seleziona
`:focus`	L'elemento che ha il focus da tastiera o da mouse
`:focus-visible`	Con focus, quando il browser decide che deve comparire un contorno (di solito con il focus da tastiera)
`:focus-within`	Un elemento che contiene l'elemento con focus
`:checked`	Una checkbox o un radio selezionati, o un `<option>` scelto
`:disabled` / `:enabled`	I controlli dei form (non) disabilitati
`:required` / `:optional`	Gli input con o senza `required`
`:invalid` / `:valid`	Gli input il cui valore non supera o supera la validazione
`:user-invalid`	Non valido, ma solo dopo che l'utente ci ha interagito
`:placeholder-shown`	Un input che sta mostrando il suo placeholder
`:empty`	Un elemento senza figli, nemmeno testo
`:target`	L'elemento il cui id corrisponde al `#fragment` dell'URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Clicca nel campo email: la sua etichetta diventa blu grazie a :focus-within. Scrivi qualcosa che non è un'email ed esci dal campo: :user-invalid rende il bordo ambra. Un semplice :invalid avrebbe segnato in ambra il campo obbligatorio vuoto prima ancora che lo toccassi.

Qualunque cosa tu faccia con :focus, mantieni uno stile di focus visibile. Togliere il contorno senza sostituirlo lascia chi usa la tastiera senza modo di vedere dove si trova.

:has(), il selettore del genitore

:has() seleziona un elemento in base a ciò che contiene. È il "selettore del genitore" richiesto da tanto tempo, e funziona nelle versioni attuali di Chrome, Firefox e Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Scegli l'altro piano: l'intera card segue il pulsante radio, senza JavaScript.

Errori comuni

Uno spazio prima dei due punti. li :first-child significa "un primo figlio dentro un li". Scrivi li:first-child.
Aspettarsi che p:nth-child(1) significhi "il primo p". Significa "il primo figlio, se è un p". Usa :first-of-type per il primo p.
Contare da 0. Le posizioni partono da 1: :nth-child(0) non seleziona niente.
Togliere i contorni di focus. :focus { outline: none } senza un sostituto rompe la navigazione da tastiera.
Confondere : e ::. :before è una vecchia grafia dello pseudo-elemento ::before; le pseudo-classi usano sempre i due punti singoli.

Domande frequenti

Cos'è una pseudo-classe in CSS?

Una parola chiave dopo i due punti che seleziona gli elementi in base allo stato o alla posizione invece che al nome, come a:hover, li:first-child o input:focus. Si aggiunge a un selettore normale, e la maggior parte delle pseudo-classi conta come una classe per la specificità (:where() conta zero).

Come funziona nth-child in CSS?

:nth-child(an+b) seleziona gli elementi la cui posizione tra i fratelli è a×n+b per n = 0, 1, 2 e così via, contando da 1. :nth-child(3) è il terzo figlio, :nth-child(odd) o 2n+1 ogni figlio dispari, e :nth-child(n+4) dal quarto in poi.

Qual è la differenza tra nth-child e nth-of-type?

:nth-child() conta tutti gli elementi fratelli, poi controlla il resto del selettore; :nth-of-type() conta solo i fratelli dello stesso tipo di elemento. In un elenco con un h2 seguito da paragrafi, p:nth-child(1) non seleziona niente mentre p:nth-of-type(1) seleziona il primo paragrafo.

Come si usa :not() in CSS?

Metti tra le parentesi il selettore da escludere: li:not(.done) seleziona ogni elemento della lista senza la classe done. Accetta anche un elenco, input:not([type="checkbox"], [type="radio"]).

Qual è la differenza tra pseudo-classe e pseudo-elemento?

Una pseudo-classe (due punti singoli, :hover) seleziona un intero elemento esistente in un certo stato. Uno pseudo-elemento (due punti doppi, ::before) si riferisce a una parte di un elemento o crea contenuto generato.

Concetti correlati