Le pseudo classi CSS - pseudo classi dinamiche

Diversamente dagli pseudo-elementi, più pseudo-classi possono essere applicate a un solo selettore per renderlo ancora più specifico.

Go to the profile of  Jacopo Kahl
Jacopo Kahl
2 min di lettura
Le pseudo classi CSS - pseudo classi dinamiche

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.

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 {}

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.