Ci sono quattro possibili modi. Il primo, conveniente se abbiamo una tipologia di link, è l’uso di una classe:
se per esempio nell’HTML definiamo link del tipo <a class=”speciale”></a>
le regole CSS potrebbero essere:
a.speciale{ /*stato normale per i link speciali*/ }
a.speciale:hover{ /*stato hover dei link speciali */ }
Il secondo metodo è attribuire a ciascun link un id unico nell’HTML. E’ opportuno usarlo quando vogliamo usare regole
specifiche su link unici. Ecco un esempio di HTML:
<a id=”home” href=”#”>Home page</a>
<a id=”prodotti” href=”#”>Prodotti</a>
<a id=”contatti” href=”#”>Contatti</a>
E il CSS:
a#home{ /*stato normale per il link che porta alla home page */ }
a#home:hover{ /*stato hover per il link che porta alla home page */ }
a#prodotti{ /*stato normale per il link che porta ai prodotti */ }
a#prodotti:hover{ /*stato hover per il link che porta ai prodotti */ }
a#contatti{ /*stato normale per il link che porta alla pagina di contatto */ }
a#contatti:hover{ /*stato hover per il link che porta alla pagina di contatto */ }
Il terzo modo è usando il selettore discendente. Andrà usato quando abbiamo i link tutti contenuti in un determinato
elemento individuato da un id, e vogliamo garantire per essi una presentazione particolare e omogenea. Ecco un esempio semplificato
del codice HTML per un menu di navigazione:
<div id=”menu”>
<a href=”#”>Home page</a>
<a href=”#”>Prodotti</a>
<a href=”#”>Contatti</a>
</div>
Il CSS sarà della forma:
div#menu a{ /*stato normale per il link del menu*/ }
a#menu a:hover{ /*stato hover per il link del menu */ }
Un quarto modo è la combinazione degli ultimi due. Nei menù realizzati con liste di navigazione è possibile
ad esempio attribuire un id per ciascun list-item e specificare le regole di ciascun link utilizzando il selettore
discendente.
E’ da tener presente che in tutti i casi le regole specifiche risentono delle regole generiche sui link
ereditandone le proprietà.