[Guida CSS #10] Classi speciali: le pseudo-classi


[Guida CSS #10] Classi speciali: le pseudo-classi

Il concetto di pseudo-classe è uno dei più particolari che incontrerete sulla vostra strada. Difatti la pseudo-classe non va a formattare un particolare elemento, ma uno stato di quest’ ultimo. In parole povere, grazie a essa è possibile far si che un elemento sia formattato solo se si verificano certe condizioni.

Ecco com’è strutturata una pseudo-classe:

a:link {color: black;}

La pseudo-classe in questo caso è :link, che si va ad appoggiare all’ elemento HTML <a>. Essa va a formattare in nero tutti i collegamenti ipertestuali che nella nostra pagina non sono stati né attivati, né visitati. Una volta cliccato sul collegamento il colore del testo non sarà più nero. Ecco come la pseudo-classe va a formattare un elemento solo in una determinata condizione.

Dal punto di vista sintattico, tutte le pseudo-classi iniziano con i due punti. Questi ultimi vanno inseriti dopo l’ elemento senza spazi. E’ possibile, inoltre, utilizzare una pseudo-classe appoggiandola ad una classe vera e propria. Ci sono due costrutti possibili in questi casi, inseriti rispettivamente con l’ uscita della specifica CSS1 e CSS2. La prima è la seguente:

a.pippo:link {color:black;}

In questo caso a venire formattato di nero saranno i collegamenti ipertestuali contenenti la classe “pippo” come quello che segue:

<a href=”link” class=”pippo”>Collegamento</a>

Il secondo metodo per utilizzare questa tecnica è leggermente diverso. Esempio:

a:link.pippo {color:black;}

Come potete vedere la sintassi è leggermente diversa, ma il risultato è lo stesso. La pseudo-classe :link, funziona con tutti i collegamenti ipertestuali i quali portano a pagine web che non abbiamo visitato. Tra le altre pseudo-classi più utilizzate troviamo:

  • :hover (essa permette di formattare un collegamento ipertestuale solo nel momento in cui ci passiamo sopra con il cursore);
  • :visited (formatta tutti i collegamenti che abbiamo già visitato);
  • :active (formatta un elemento solo quando, posizionandoci sul cursore sopra di esso, teniamo premuto il tasto sinistro del mouse).

Infine, un altro tipo di pseudo-classe non molto utilizzata è :first-child. Essa ci permette di formattare solo gli elementi che sono primi figli di un altro elemento. Esempio:

p:first-child {color:black;}

In questo caso verranno formattati in nero solamente i paragrafi figli diretti di un altro elemento. Di conseguenza in una struttura HTML come quella che segue verranno formattati solamente i paragrafi indicati.

<div>
<p>Primo Paragrafo</p><!–NERO–>
<p>Secondo Paragrafo</p>
<table>
<tr>
<td>
<p>Terzo Paragrafo</p><!–NERO–>
<p>Quarto Paragrafo</p>
</td>
</tr>
</table>

Come potete vedere, verranno formattati solo il primo e il terzo paragrafo poiché rispettivamente figli diretti di <div> e <table>. Per qualsiasi dubbio o chiarimento chiedete pure nei commenti 😉

<- Lezione precedente (Classi e ID)
Lezione successiva (Elementi speciali: gli pseudo-elementi)->

Lascia un commento

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