picture picture
mars 21, 2005 CSS 2 Commentaires

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&ccedil;ais ... </a> <br /> <a href="http://www.microsoft.com/" hreflang="us" target="_blank">... et un bien Am&eacute;ricain ! </a> </body> </html>

C’est plus fin que .class et #id ;)

2 Responses to “Comment appliquer finement un CSS à une balise ?”

2 Commentaires

  1. Mead5 dit :

    Bonjour, c’est vraiment intéressant, merci http://www.webtolosa.com

  2. VofNaibia dit :

    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.

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: