CSS: differenziare i link
27/02/2012Attraverso CSS possiamo differenziare la formattazione dei link anche in base alla destinazione del link stesso: ovvero visualizzare diversamente i link interni dai link a siti esterni, oppure i link su email o su formati di file specifici (musicali, video, zippati etc etc).
Una volta compresa la sintassi, estremamente semplice, possiamo sbizzarirci in moltissime differenziazioni con pochisisme righe di codice!
Ecco un esempio (in cui modifico solo il colore, solo per brevità):
/* qualsiasi link esterno */
a[href^="http://"] {
color: red;
}
/* link a indirizzo specifico */
a[href="http://www.google.it"] {
color: green;
}
/* link interni */
a[href^="/"], a[href^=".."] {
color: blue;
}
/* link email */
a[href^="mailto:"] {
color: orange;
}
/* link a pdf */
a[href$=".pdf"] {
color: purple;
}
/* link a file mp3 */
a[href$=".mp3"] {
}
/* link a file zippati */
a[href$=".zip"] {
}