Pseudo-classi: :hover, :focus, :first-child, :nth-child(), :not()

Le pseudo-classi sono parole chiave aggiunte a un selettore che specificano uno stato speciale dell’elemento selezionato. A differenza delle normali classi, non devi scriverle nell’HTML: il browser sa automaticamente quando applicarle in base alle interazioni dell’utente o alla struttura del documento.

Si indicano con i due punti (:) attaccati al selettore originale.

1. Pseudo-classi di interazione (Stato)

Queste pseudo-classi rispondono alle azioni fisiche dell’utente.

:hover

Si attiva quando l’utente passa il cursore del mouse sopra l’elemento. Fondamentale per far capire che un elemento (come un bottone o un link) è cliccabile.

.btn {
  background-color: blue;
  transition: background-color 0.3s;
}

/* Quando il mouse è sopra .btn */
.btn:hover {
  background-color: darkblue;
}

:focus

Si attiva quando l’elemento viene “messo a fuoco”, ad esempio cliccando dentro un campo di input o navigando con il tasto Tab della tastiera. È vitale per l’accessibilità.

input {
  border: 2px solid gray;
}

/* Quando sto scrivendo nell'input */
input:focus {
  border-color: blue;
  outline: none; /* Rimuove l'anello di default del browser */
}

2. Pseudo-classi Strutturali (Posizione)

Queste permettono di selezionare elementi in base alla loro posizione relativa agli elementi “fratelli” dentro al genitore. Ti salvano dal dover aggiungere innumerevoli classi nell’HTML.

:first-child e :last-child

Selezionano rispettivamente il primo o l’ultimo elemento all’interno di un contenitore.

/* Rimuove la linea dall'ultimo elemento della lista */
li {
  border-bottom: 1px solid #eee;
}

li:last-child {
  border-bottom: none;
}

:nth-child(n)

È la pseudo-classe strutturale più potente. Permette di selezionare in base a formule matematiche o parole chiave (odd per dispari, even per pari).

/* Colora di grigio una riga sì e una riga no nella tabella */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Seleziona esattamente il terzo paragrafo */
p:nth-child(3) {
  font-weight: bold;
}

3. La Pseudo-classe Funzionale: :not()

Il :not() funziona come un’esclusione (il comando “tranne questo”). È utilissimo per scrivere meno regole e mantenere il CSS pulito.

/* Applica margine in basso a tutti i paragrafi TRANNE l'ultimo */
p:not(:last-child) {
  margin-bottom: 20px;
}

/* Applica uno stile opaco ai bottoni, tranne a quello che ha classe .active */
.btn:not(.active) {
  opacity: 0.5;
}

Padroneggiare le pseudo-classi significa scrivere un HTML molto più pulito: invece di aggiungere classi logiche via JavaScript (es. class="last-item"), usi il CSS per dedurre la struttura naturalmente!