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