Une petite astuce en CSS3 qui permet de sélectionner des lien selon le contenu de leur url. Imaginons que nous ayons une liste de liens vers des documents divers auquel on veut associer une icône relative à son type : des PDF, des ODF, des PPT, des MP4, etc avec chacun une icone indiquant le type de fichier. Classiquement, on prévoira, coté serveur, de tester le type de fichier lors de la création de la liste et de rajouter une classe indiquant le type. Mais si le développeur a oublié, et c'est encore possible grâce aux sélecteurs CSS3.

.malistededocs a[href$=".pdf"] {
	background: url('pdf.png');
}
.malistededocs a[href$=".zip"] {
	background: url('zip.png');
}
.malistededocs a[href$=".ppt"] {
	background: url('ppt.png');
}
.malistededocs a[href$=".mp4"],
.malistededocs a[href$=".m4v"],
.malistededocs a[href$=".avi"],
.malistededocs a[href$=".mkv"],
.malistededocs a[href$=".mov"] {
	background: url('video.ppt');
}

Le sélecteur [attribut$=valeur] permet de chercher les éléments dont l'attribut indiqué se termine par la valeur. On se réfèrera à la doc du W3C pour découvrir les autres types de sélecteurs :

• [att] : trouve les éléments qui possèdent l'attribut att,
• [att=val] : trouve les éléments qui possèdent l'attribut att et qui vaut exactement val,
• [att~=val] : val est une liste de mot séparés par des espaces. Ce sélecteur trouve les éléments qui possèdent l'attribut att et dont la valeur est exactement l'une de celles de la liste val,
• [att|=val] : trouve les éléments qui possèdent l'attribut att et qui vaut exactement val ou val-. Utile pour les attributs de langue où att retrouvera "en", mais aussi "en-EN" ou "en-US",
• [att^=val] : trouve les éléments dont la valeur de att commence par val
• [att$=val] : trouve les éléments dont la valeur de att finit par val
• [att*=val] : trouve les éléments dont la valeur de att contient val