Nel seguente articolo imparerai ad utilizzare le pseudo classi di CSS e a cosa servono. Inoltre troverai una lista delle pseudo-classi CSS più utili e comuni.
Il CSS non è esclusivamente un linguaggio che regola lo stile degli elementi presenti in una pagina web, ma consente di definire anche il comportamento di questi in differenti casi e situazioni.
Con le pseudo classi è possibile definire uno stile aggiuntivo agli elementi HTML oltre alle regole predefinite presenti nei fogli di stile CSS. Queste si rivelano molto utili per rendere più dinamico lo stile stesso della pagina.
L’esempio più noto di pseudo-classe CSS è quello che viene applicato ad un pulsante (button) HTML, che al passaggio del cursore mouse cambia il suo stile (colore, forma, ombre etc…), cambiando poi nuovamente al click.
Oppure ad un link/collegamento ipertestuale che diventa di colore viola dopo essere stato visitato/cliccato.
È più facile capire con un esempi pratico; Clicca il pulsante:
Come poi vedere, lo stile grafico del pulsante è suddiviso in tre fasi.
Ogni fase ha uno stile proprio, definito dalle pseudo-classi CSS.
Le pseudo classi sono applicate al selettore dell’elemento HTML, secondo una precisa sintassi.
#selettore:pseudo-classe {
}
Esaminando il codice, puoi capire che la pseudo classe segue il nome del selettore (id, classi etc…), separati dal simbolo “due punti” (:).
Le regole CSS della pseudo-classe sono separate e distinte da quelle del selettore. Se avranno istruzioni simili, non si noteranno effetti.
Esempio:
button {
background-color:blue;
}
button:hover{
background-color:red;
}
Qui di seguito una lista con le pseudo classi più comuni ed utilizzate con la relativa descrizione.
Tipo | Descrizione | Esempio |
---|---|---|
:hover | Si attiva al passaggio del cursore del mouse sull’elemento | p:hover{} |
:active | Si attiva dopo il click del mouse | input:active{} |
:focus | Attivazione dopo il click del mouse | button:focus{} |
:link | Stile dei link non visitati | a:link{} |
:visited | Stile dei link già visitati | a:visited{} |
:checked | Si attiva sugli elementi selezionati di un campo “input” | input:checked{} |
:first-child | Seleziona il primo elemento figlio/child dell’oggetto padre | div:first-child{} |
p:hover{
color:red;
}
p:active{
color:blue;
}
Cliccamiinput{
height:20px;
width: 20px;
}
input:checked{
height:50px;
width: 50px;
}
ClickVisualizza il programma completo del corso HTML e CSS
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti: