Le pseudo-classi consentono di inserire uno stile basato sulle relazioni tra gli elementi, in particolare esse definiscono lo stato di un elemento.
Molte di loro si inseriscono in tre categorie: pseudo-classi dinamiche, strutturali e di interfaccia utente. Diversamente dagli pseudo-elementi, più pseudo-classi possono essere applicate a un solo selettore per renderlo ancora più specifico.
Indice
Pseudo classi dinamiche
La prima categoria di pseudo-classi viene utilizzata per applicare stili a collegamenti o altro elementi interattivi quando il loro stato viene modificato. Ce ne sono cinque, tutte introdotte da CSS 2.
link e visited
Le pseudo-classi dinamiche :link e :visited, possono essere applicate solo a
l'elemento di ancoraggio <a>.
La pseudo-classe :link abbina i collegamenti alle pagine che non sono state ancora visualizzate, mentre :visited corrisponde ai link che sono già stati visitati.
a:link {} /* link non visitato */
a:visited {} /* link visitato */
active e hover
Un'altra pseudo-classe è :active, che corrisponde agli elementi attivati tramite interazione, come ad esempio il clic del mouse. Questo è molto utile per definire gli stili degli elementi di ancoraggio, ma può essere applicato a qualsiasi elemento. Un uso frequente lo troviamo negli stili delle voci di menu delle pagine su cui ci troviamo.
a:active {} /* link attivato */
Un selettore con la pseudo-classe :hover viene utilizzato ad esempio quando l'utente va sopra con il cursore del mouse su un elemento. È comunemente usato per creare effetti di roll-over di link per evidenziarli.
a:hover {} /* link evidenziato dal mouse */
Queste quattro pseudo-classi devono apparire nell'ordine corretto quando
applicate allo stesso selettore. In particolare, la pseudo-classe :hover deve essere messa dopo :link e :visited. :active invece per funzionare deve apparire
dopo :hover.
Per ricordarci il corretto ordine teniamo a mente:
/*Ordine di inserimento pseudo-classi*/
a:link {} /* L */
a:visited {} /* V */
a:hover {} /* H */
a:active {} /* A */
focus
L'ultima pseudo-classe dinamica è :focus, che può essere usata ad esempio sugli elementi di input come gli <input> dei form .
La differenza tra :active e: focus è il fatto che :active viene attivato per la durata complessiva di un click, mentre :focus dura fino a quando l'elemento perde il proprio focus.
input:focus {}
