Cosa sono le pseudo-classi in CSS?

Le pseudo-class in CSS sono parole chiave aggiunte ai selettori per indicare uno stato particolare dell’elemento. Consentono di applicare stili agli elementi in base alla loro interazione con l’utente, alla posizione nella struttura del documento o ad altre caratteristiche che non possono essere espresse con i selettori standard.

Esempi di pseudo-classi:

• Stati dell’utente:

  • :hover - elemento su cui si trova il cursore del mouse.
  • :active - elemento che viene attivato (ad esempio, un pulsante premuto).
  • :focus - elemento che ha il focus di input (ad esempio, un campo di testo).
  • :visited - link che l’utente ha già visitato.
  • :link - link che l’utente non ha ancora visitato.

• Posizione nella struttura:

  • :first-child - primo figlio del suo genitore.
  • :last-child - ultimo figlio del suo genitore.
  • :nth-child(n) - n-esimo figlio del suo genitore.
  • :first-of-type - primo elemento del suo tipo tra i figli.
  • :last-of-type - ultimo elemento del suo tipo tra i figli.

• Altri:

  • :empty - elemento senza figli né testo.
  • :not(selector) - elementi che non corrispondono al selettore indicato.

Sintassi:

selector:pseudo-class {
  property: value;
}

Esempio di utilizzo:

/* Cambia il colore del testo al passaggio del mouse su un paragrafo */
p:hover {
  color: blue;
}

/* Stile per il primo elemento di una lista */
li:first-child {
  font-weight: bold;
}

Le pseudo-class estendono le capacità dei selettori, permettendo di creare interfacce più dinamiche e interattive senza usare JavaScript per semplici modifiche di stile.