Pseudo classi – Guida al CSS

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.

Cosa sono le pseudo-classi CSS?

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.

  • Stato predefinito, stile di base (colore rosso);
  • Cambio di stile al passaggio del cursore del mouse sopra il pulsante, senza click (colore blu);
  • Cambio di stile al click del mouse (colore verde).

Ogni fase ha uno stile proprio, definito dalle pseudo-classi CSS.

Sintassi

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

Lista delle pseudo classi più comuni

Qui di seguito una lista con le pseudo classi più comuni ed utilizzate con la relativa descrizione.

TipoDescrizioneEsempio
:hoverSi attiva al passaggio del cursore del mouse sull’elementop:hover{}
:activeSi attiva dopo il click del mouseinput:active{}
:focusAttivazione dopo il click del mousebutton:focus{}
:linkStile dei link non visitatia:link{}
:visitedStile dei link già visitatia:visited{}
:checkedSi attiva sugli elementi selezionati di un campo “input”input:checked{}
:first-childSeleziona il primo elemento figlio/child dell’oggetto padrediv:first-child{}

Esempi

p:hover{
  color:red;
}
p:active{
  color:blue;
}
Cliccami
input{
  height:20px;
    width: 20px;
}
input:checked{
  height:50px;
  width: 50px;
}
Click

Visualizza il programma completo del corso HTML e CSS

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA