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: "~""~";}