CSS  »  Articoli  »  Mondo CSS 

Ordine delle pseudoclassi

Le pseudoclassi per funzionare correttamente devono, a causa delle regole della Ereditarietà, cascade, conflitti tra stili, seguire un ordine ben prestabilito: l'ordine in cui vanno inserite in un CSS le dichiarazioni relative ai link è dunque il seguente:

1. a:link
2. a:visited
3. a:hover
4. a: active

Per cui un esempio di stile sui link sarà:

a:link, a:visited, a:hover, a:active{
font:bold 18px Georgia,"Times New Roman",Times,serif;
text-decoration:none;
}

a:link{
color:#FF6600;
}

a:visited{
color:#000000;
}

a:hover, a:active {
color: #366;
text-decoration: underline;
}

Come si vede nell'esempio, abbiamo creato una dichiarazione associata a selettori raggruppati. Ci riferiamo alla prima regola, che imposta le proprietà di testo comuni a tutti gli stati del link per mezzo delle pseudoclassi a:link, a:visited, a:hover e a:active separate da una virgola.

Abbiamo inoltre eliminato la sottolineatura nei link, impostando esplicitamente text-decoration:none, dal momento che - come è noto - i browser, di default, visualizzano i link sottolineati, quindi se vogliamo collegamenti senza sottolineatura bisogna appunto specificarlo esplicitamente nella proprietà text-decoration.

Tuttavia, se vogliamo che al passaggio del mouse, o con il link attivo si visualizzi la sottolineatura ecco che per a:hover, a:active dovremo specificare text-decoration: underline.

Infatti la prima dichiarazione

a:link, a:visited, a:hover, a:active{
font:bold 18px Georgia,"Times New Roman",Times,serif;
text-decoration:none;
}

elimina la sottolineatura dei link non visitati, dei link visitati, dei link al passaggio del mouse e dei link attivi. Dunque quando andiamo ad attribuire stili specifici ai selettori raggruppati a:hover,a:active specifichiamo che il link al passaggio del mouse o attivo sarà sottolineato. Dal momento che

a:hover, a:active{
color: #366;
text-decoration: underline;
}

è una dichiarazione scritta nel CSS dopo la dichiarazione

a:link, a:visited, a:hover, a:active{
font:bold 18px Georgia,"Times New Roman",Times,serif;
text-decoration:none;
}

e, per effetto della cascata, avrà la prevalenza. Dunque a:hover,a:active sarà sottolineato.

Avremmo potuto non specificare nulla nei selettori raggruppati a:link, a:visited, a:hover, a:active e settare la proprietà text-decoration per ogni singolo selettore specifico degli stati:

a:link, a:visited, a:hover, a:active{
font:bold 18px Georgia,"Times New Roman",Times,serif;
}
a:link{
color:#FF6600;
text-decoration:none;
}
a:visited{
color:#000000;
text-decoration:none;
}
a:hover, a:active{
color: #366;
text-decoration: underline;
}

Il risultato è identico, anche se il primo esempio, risparmiando una dichiarazione relativa alla proprietà text-decoration, ha un codice più snello.

Qualora si volesse utilizzare anche la pseudoclasse :focus (comunque non supportata da IE) con un link, piuttosto che con gli elementi di un form ¯ il suo utilizzo più logico ¯ allora l'ordine sarà:

1. a:link
2. a:visited
3. a:focus
4. a:hover
5. a:active

Si noti come Dreamweaver, selezionando il pulsante di opzione Use CSS Selectors mostra nel menù a discesa i quattro stati delle pseudoclassi utilizzate per i link. Tuttavia le versioni di Dreamweaver precedenti a MX mostravano queste pseudoclassi in ordine alfabetico, mentre da Dreamweaver MX in poi vengono correttamente mostrate nell'ordine che, preservando la cascata, consente di utilizzare tutte e quattro le pseudoclassi per lo stesso link, senza che queste entrino reciprocamente in conflitto. Dunque mentre Dreamweaver MX e successivo agevola la corretta precedenza nel selezionarle, con le versioni precedenti bisogna porre maggiore cura per inserirle nell'ordine corretto.

Altri articoli

Altre guide

Altre newsletter