
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.


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 [...]