Modificare le icone dei link in base al tipo di file con CSS3

ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Con i selettori CSS3 è possibile associare un'icona ai link in base al tipo di file o collegamento. Visualizza l'esempio: DEMO Il codice funziona con i browser compatibili CSS3 e degrada bene con gli altri.


/* Links esterni */
a[href^="http://"] {
 padding-left: 22px;
 background: url(external.jpg) no-repeat center left;
}
/* e-mail */
a[href^="mailto:"] {
 padding-left: 22px;
 background: url(mail.jpg) no-repeat center left;
}
/* pdf */
a[href$=".pdf"] {
 padding-left: 22px;
 background: url(pdf.jpg) no-repeat center left;
}

I selettori che si possono utilizzare sono i seguenti:

oggetto[parametro^="http://"] il parametro inizia con...
oggetto[parametro$=".html"] il parametro termina con...
oggetto[parametro*="ciao"] il parametro contiene...

Per una lista completa dei selettori CSS3 visualizzare la pagina ufficiale del W3C sui selettori CSS3

 


Commenti