PROGRAMMIAMO
HTML - Pseudoclassi
Pseudoclassi

Una pseudoclasse consente di definire uno stato particolare di un elemento. Si consideri l'esempio seguente di definizione di una pseudoclasse in un foglio stile:

a:link {color: magenta;}
a:visited {color: red;}
a:hover {color: yellow;}
a:active {color: brown;} 

In questo modo vengono specificati stili diversi a seconda che l'elemento a sia stato già cliccato (visited), nel caso in cui ci si passi il mouse sopra (hover), nel caso sia attivo (active, nel momento in cui viene cliccato col mouse) etc.

ATTENZIONE: a:hover deve essere messo dopo di a:link e di a:visited. Inoltre a:active deve venire dopo a:hover nella definizione degli stili, altrimenti non funziona.

La sintassi delle pseudoclassi è la seguente:

selettore:pseudoclasse {
             proprietà:valore;
             proprietà:valore;
             ...
             }

Si notino i due punti che separano il nome del selettore dal nome della pseudoclasse.

Un altro classico esempio di uso delle pseudoclassi è il seguente, che realizza una tabella con righe alternate di colori differenti (per semplicità abbiamo qui usato gli stili incorporati nella pagina):

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">

<style>

.righealterne{
                width:50%;
                border-collapse:collapse;
                }

.righealterne td{
                padding:7px; border:#4e95f4 1px solid;
                }

/* Definisce il colore di sfondo per le righe pari */
.righealterne tr:nth-child(odd){
                background: #b8d1f3;
                }
/* Definisce il colore di sfondo per le righe dispari */
.righealterne tr:nth-child(even){
            background: #dae5f4;
                }

</style>

</head>
<body>
<table class="righealterne">
<tr><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td></tr>
</table>
</body>

</html>

In questo caso abbiamo due pseudoclassi, :nth-child(odd) e :nth-child(odd), che permettono rispettivamente di selezionare tutte le righe pari e tutte le righe dispari.

Per ulteriori approfondimenti sull'uso delle pseudoclassi, rimandiamo all'elenco e alla trattazione completa di W3C Schools.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it