Comment appliquer finement un CSS à une balise ?
Tout le monde connait les .class et les #id. Mais il y a plus avec CSS2 …
… et celà permet de créer des liens bien français… ou bien anglais !
Les feuilles de style sont conçues autour du trio sélecteur/propriété/valeur : telle valeur V est assignée à la propriété P des balises reconnues par le sélecteur. Ainsi,
a { border: 5px; }
… indique que toutes les balises A doivent afficher une bordure de 5 pixels.
Tout cela serait bien limité s’il n’existait pas de nombreux types de sélecteurs mis à disposition des développeurs.
Celui abordé ici, le sélecteur d’attribut (attribute selector) est apparu avec la spécification CSS 2.1, et permet de préciser le sélecteur en indiquant les attributs que doivent compter les balises visées.
Les attributs peuvent être indiqués de quatre manières principales :
a[name] { border: 5px; }
…visera toutes les balises a disposant d’un attribut name.
a[name="titre"] { border: 5px; }
…correspond aux balises a ayant un attribut name égal à « titre » (et seulement ce mot).
a[name~="titre"] { border: 5px; }
…l’attribut name contient au moins « titre ».
a[name|="titre"] { border: 5px; }
…name commence par titre, et peut être suivi d’autres mots.
Il est bien sà»r possible de combiner les sélecteurs :
a[name="titre"][class="entete"] { border: 5px; }
Il devient par exemple possible de créer un affichage spécifique pour les liens vers les sites sécurisés :
a[href|="https"] { background: red; }
… ou encore d’associer un drapeau spécifique aux liens en fonction de la langue du site-cible, en utilisant l’atttribut « hreflang » associé au pseudo-format « after » (ne marche pas sous IE6 qui ne respecte pas beaucoup les standards CSS2… mais pas de problème avec Firefox :)) ) :
Voir un exemple
dont voici le code :
<html> <head> <style type="text/css"> a[hreflang="fr"]:after { content: url("fr.gif"); } a[hreflang="us"]:after { content: url("us.gif"); } </style> </head> <body> <a href="http://www.webtolosa.fr" hreflang="fr" target="_blank">Un site bien Français ... </a> <br /> <a href="http://www.microsoft.com/" hreflang="us" target="_blank">... et un bien Américain ! </a> </body> </html>
C’est plus fin que .class et #id 
Bonjour, c’est vraiment intéressant, merci http://www.webtolosa.com
complex site
I have an Iron Horse) This will be my deficient trip to Sturgis, we intention be leaving on July 28th and staying through the 8th.