Modificare le icone dei link in base al tipo di file con CSS3
2 gennaio 2010
No Comments
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
Tags: css
