Pseudo Classi in CSS

Una pseudo-classe viene utilizzata per definire uno stato speciale di un elemento.

Ad esempio, può essere utilizzata per:

Stilare un elemento quando un utente ci passa sopra con il mouse.
Stilare i link visitati e non visitati in modo diverso.
Stilare un elemento quando ottiene il focus.

Sintassi

La sintassi delle pseudo-classi:

selettore:pseudo-classe {
  proprietà: valore;
}

Pseudo-classi per i link

I link possono essere visualizzati in modi diversi:

/* link non visitato */
a:link {
  color: #ff0000;
}

/* link visitato */
a:visited {
  color: #00ff00;
}

/* passaggio del mouse sul link */
a:hover {
  color: #ff00ff;
}

/* link selezionato */
a:active {
  color: #0000ff;
}

Nota che a:hover DEVE venire dopo a:link e a:visited nella definizione CSS per avere effetto. Allo stesso modo a:active DEVE venire dopo a:hover. I nomi delle pseudo-classi non sono sensibili alle maiuscole e minuscole.

Pseudo-classi e classi HTML

Le pseudo-classi possono essere combinate con le classi HTML:

Quando passi il mouse sopra il link nell’esempio, cambierà colore:

a.prova:hover {
  color: #212121;
}

Hover su un elemento

Ecco un esempio dell’utilizzo della pseudo-classe :hover su un elemento <div>:

p:hover {
  background-color: red;
}

La pseudo-classe :first-child

La pseudo-classe :first-child corrisponde a un elemento specificato che è il primo figlio di un altro elemento.

Nell’esempio seguente, il selettore corrisponde a qualsiasi elemento <p> che è il primo figlio di qualsiasi elemento:

p:first-child {
  color: blue;
}

Esistono altre pseudo classi simili come:

:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type

La pseudo-classe :lang

La pseudo-classe :lang consente di definire regole speciali per lingue diverse.

Nell’esempio seguente, :lang definisce le virgolette per gli elementi <q> con lang=“no”:

<p>
  Un po' di testo <q lang="it">Una citazione in un paragrafo</q> Alcuni testi.
</p>

q:lang(it) {
  quotes: "~""~";
}