۝ OraWeb.it ۝ Pseudo-classi CSS

Le pseudo-classi in CSS

Pseudo-classi in CSS

Le pseudo-classi CSS permettono di selezionare elementi HTML in base a stati particolari, condizioni dinamiche o alla loro posizione nel DOM. Non selezionano elementi in base al nome del tag o all’attributo, ma in base a caratteristiche come il fatto che siano il primo figlio, siano attivati, siano in focus o già visitati.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Approfondimenti

Quando usare le pseudo-classi: quando è necessario selezionare un elemento che si trova in uno stato specifico, ad esempio un link già visitato, un campo input attivo o un elemento che è il primo figlio di un contenitore.
Abbinamenti utili con altre proprietà: le pseudo-classi si usano spesso insieme a proprietà di interazione visiva come color, background-color, border o display per creare effetti dinamici o stili condizionali.
Stati interattivi: pseudo-classi come :hover, :focus e :active permettono di reagire all’interazione dell’utente (mouse, tastiera, clic) per migliorare l’esperienza d’uso.
Validazione dei form: con :valid, :invalid, :required e :checked è possibile applicare stili in base alla validità o alla selezione dei campi nei moduli.
Posizione nel documento: pseudo-classi come :first-child, :last-child, :nth-child() o :only-child permettono di stilizzare elementi in base alla loro posizione rispetto agli altri fratelli.
Filtri avanzati: :not() consente di escludere elementi da una regola, mentre :empty seleziona elementi privi di contenuto.

Le pseudo-classi sono fondamentali per scrivere CSS efficace e flessibile. Consentono di evitare l’uso di JavaScript per alcuni comportamenti visivi comuni e migliorano l’accessibilità e l'interazione degli utenti con la pagina.

✅ Tabella Pseudo-classi

Nota:
Le pseudo-classi si scrivono con un solo due punti (:) e permettono di selezionare elementi in uno stato particolare (hover, focus, primo figlio, ecc.).

Pseudo-classe	Descrizione
`:hover`	Seleziona l'elemento quando il puntatore del mouse lo passa sopra.
`:focus`	Seleziona l'elemento che ha il focus (es. input attivo).
`:active`	Stilizza l'elemento mentre è attivamente cliccato.
`:visited`	Seleziona i link già visitati.
`:first-child`	Seleziona il primo figlio di un elemento genitore.
`:last-child`	Seleziona l’ultimo figlio.
`:nth-child(n)`	Seleziona l’n-esimo figlio, o un pattern (es. `2n`, `odd`).
`:not(selector)`	Esclude gli elementi che corrispondono al selettore specificato.
`:checked`	Seleziona input selezionati (radio, checkbox).
`:disabled`	Seleziona elementi disabilitati (input, button...).
`:enabled`	Seleziona elementi attivi e abilitati.
`:required`	Seleziona campi obbligatori nei form.
`:valid`	Seleziona input/form con valori validi.
`:invalid`	Seleziona input/form con valori non validi.
`:empty`	Seleziona elementi senza figli né testo.

Esempi pratici

Codice Esempio: Pseudo-classi

CODE: CSS preleva codice

/* Cambia colore a un link quando viene visitato */

```
a:visited {
```
```
  color: purple;
```
```
}
```
```
 
```

/* Evidenzia un input quando ha il focus */

```
input:focus {
```
```
  border: 2px solid blue;
```
```
}
```
```
 
```

/* Nasconde l’ultimo elemento di una lista */

```
li:last-child {
```
```
  display: none;
```
```
}
```
```
 
```

/* Applica uno sfondo a checkbox selezionati */

```
input[type="checkbox"]:checked {
```
```
  background-color: lightgreen;
```
```
}
```

Le pseudo-classi in CSS

Pseudo-classi in CSS

Approfondimenti

✅ Tabella Pseudo-classi

Esempi pratici

Follow us

Quick Links

Information

Contact Information