Le pseudo-classi nei CSS

logo css Le pseudo classi nei CSS

Continuando il discorso sulle regole css introdotto con i selettori, oggi mi occupo di pseudo-classi. In qualche modo, di pseudo-classi avevo già parlato, ma scendiamo nel dettaglio di questo argomento importante e molto utilizzato nei css.

Le pseudo-classi, in sostanza, servono per creare delle distinzioni nei diversi stati di uno stesso elemento. Questo significa che non possono esser dichiarate da sole, ma devono essere necessariamente associate ad un selettore.

Vediamo in dettaglio le pseudoclassi.

:first-child

Seleziona e formatta un elemento che si trovi ad essere il primo elemento figlio di un altro elemento. Vediamo un esempio :

p:first-child {color:red;}

La regola dice questo : il colore rosso sarà applicato solo ai paragrafi che siano il primo elemento figlio di qualsiasi altro elemento. Cioé :

<div>
<p>blah blah blah</p><!–sarà rosso–>
<p>blah blah blah</p>
<table>
<tr>
<td>
<p>blah blah blah</p><!–sarà rosso–>
<p>blah blah blah</p>
</td>
</tr>
</table>

In tal caso, il commento evidenzia ciò che sarà rosso. Nel primo caso si tratta del primo figlio (p) dell’elemento div, mentre nel secondo caso dell’elemento td.

:link

Si applica solo all’elemento (X)HTML <a> che abbia anche l’attributo href e definisce lo stile per questo elemento quando il collegamento punta ad una URL non ancora visitata.

:visited

Stesso discorso della pseudo-classe precedente, ma si applica a link già visitati.

:hover

Si applica mentre l’utente indica un elemento (con qualche dispositivo di puntamento come il mouse), ma non lo attiva. Non si applica necessariamente all’elemento <a>

:focus

Identifica un link o un elemento che abbia ricevuto il focus.Anche in questo caso non si applica necessariamente all’elemento <a>

:active

Tale pseudo-classe identifica un link durante l’attivazione da parte dell’utente (magari tramite tastiera). Anche in questo caso non si applica necessariamente all’elemento <a>

Va precisato che non tutti i browser o tutte le loro versioni supportano queste pseudo-classi e che, pertanto, è bene verificare di volta in volta.

1 Commento all'articolo

  1. Tweets that mention Le pseudo-classi nei CSS: Condividi Continuando il discorso sulle regole css introdotto con i selettori, oggi mi ... -- Topsy.com - 3 maggio 2010

    [...] This post was mentioned on Twitter by Giovanni Riccio, i1@nni@v@nti. i1@nni@v@nti said: Le pseudo-classi nei CSS: Condividi Continuando il discorso sulle regole css introdotto con i selettori, oggi mi … http://bit.ly/d1tRyo [...]

Lascia un commento