Il CSS ha una sintassi per i selettori che permette di riconoscere l’estemsione di un file alla fine dell’attributo href del tag <a>. Questo offre molti vantaggi, non ultimo quello di aggiungere un’icona prima o dopo la parte testuale del link.

Vediamo come. Supponiamo che vogliate aggiungere un’icona ad ogni file zip presente tramite link sul vostro blog. Il codice sarà del tipo :

a[href$='.zip'] {
/* parte dedicata allo stile */
}

Il carattere $ riesce a riconoscere l’estensione del file presente nel tag <a>.

Vediamo, ora, più in dettaglio un esempio concreto dove alcune icone di 16px x 16px  sono allineate prima e dopo un link.

a[href$='.doc'], a[href$='.docx'] {
    background: transparent url(/images/content/icon_word.gif) center right no-repeat;
    padding-right: 18px;
}
a[href$='.pdf'] {
    background: transparent url(/images/content/icon_pdf.gif) center left no-repeat;
    padding-left: 18px;
}
a[href$='.zip'] {
    background: transparent url(/images/content/icon_zip.gif) center left no-repeat;
    padding-left: 18px;
}

Commenti?