Attribut


CSS nous offre la possibilité de cibler un élément en fonction d'un de ses attributs. Vous connaissez certainement déjà les classes et les id. Regardons ce petit HTML :

//HTML
<h2 id="title" class="magic" rel="ami">David Walsh</h2>

Cet élément a trois attributs : un id, une classe et une relation. Pour sélectionner cet élément en CSS vous pourriez utiliser un sélecteur id ou class, mais vous pouvez également le sélectionner en fonction de son attribut rel. C'est ce qu'on appelle un sélecteur d'attribut et voici comment il se présente, avec ses crochets [] :

//CSS
h2[rel="ami"] {
   /* woohoo! */
}

Rappelons quelques attributs HTML courants :
class, id, data-*, src, for, type, href, title, alt, aria-*, role. Les deux premiers ont leur syntaxe spécifique de sélecteur (. et #), les autres suivent la syntaxe des sélecteurs d'attributs.
Mais il y a beaucoup plus à dire sur les sélecteurs d'attributs, alors regardons de plus près toutes les options qui s'offrent à nous et en particulier les situations où ils pourraient nous être utiles dans un scénario réel.

[rel=external]

L'attribut est égal à une certaine valeur
Dans l'exemple précédent, l'attribut rel était égal à "ami". Le sélecteur CSS que nous avons écrit ciblait cet élément <h2> parce que son attribut rel était exactement "ami". En d'autres termes, le signe "=" dit très précisément que vous recherchez une correspondance exacte. Regardons un autre exemple basique :

//HTML
<h1 rel="external">Attribute Equals</h1>

//CSS
h1[rel="external"] { color: red; }

Dans le monde réel, un bon exemple de ce cas d'usage serait l'ajout de style à une liste. Supposons que vous ayez listé vos amis dans votre blog :

//HTML
<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

Puis vous voulez appliquer un style légèrement différent à chacun. La façon habituelle de faire consisterait probablement à donner une classe à chaque lien, mais cela implique d'alourdir le balisage et c'est toujours à éviter (il faut rester sémantique et toutes ces sortes de choses). Une autre façon pourrait être d'utiliser :nth-child, mais ça implique que l'ordre ne change jamais. En fait, c'est le cas d'utilisation parfait pour les sélecteurs d'attributs... les liens ont un attribut unique que nous pouvons cibler !

//CSS
a[href="http://perishablepress.com"] { color: red; }

Je crois que l'utilisation la plus courante des sélecteurs d'attributs est sur les <input>. Il y en a des tas : text, button, checkbox, file, hidden, image, radio, reset, submit (est-ce que j'en ai oublié ?), tous sont des <input> et ils sont tous distincts. Donc écrire quelque chose comme input: { padding: 10px; } est en général une mauvaise idée. Il est assez courant de voir des choses comme :

//CSS
input[type="text"] { padding: 3px; }
input[type="radio"] { float: left; }

C'est vraiment la seule manière de maîtriser certains input sans dérégler les autres et sans alourdir vos balises.

Note à propos des guillemets : normalement on peut éviter les guillemets dans les sélecteurs d'attributs, comme [type=radio], mais les règles d'utilisation des guillemets sont bizarres et appliquées différemment par les navigateurs. Donc il est préférable de les utiliser, [type="radio"] est plus sûr et fonctionne toujours.

[rel*=external]

L'attribut contient une certaine valeur quelque part
À partir d'ici, ça commence à devenir intéressant. Si l'on place une étoile * avant le signe =, on en change légèrement la signification, qui devient : trouver la valeur quelque part à l'intérieur de la valeur de l'attribut. Regardons cet exemple :

//HTML
<h1 rel="xxxexternalxxx">Attribute Contains</h1>

//CSS
h1[rel*="external"] { color: red; }

Rappelez-vous que les classes et les id sont aussi des attributs et peuvent être utilisés avec les sélecteurs d'attributs. Imaginons par exemple que vous écriviez le CSS d'un site dont vous ne pouvez pas contrôler le balisage et un mauvais développeur a créé trois <div> que vous devez cibler :

//HTML
<div id="post_1"></div>
<div id="post_two"></div>
<div id="third_post"></div>

Vous pouvez les sélectionner ainsi :

//CSS
div[id*="post"]  { color: red; }

[rel^=external]

L'attribut commence avec une certaine valeur

//HTML
<h1 rel="external-link yep">Attribute Begins</h1>

//CSS
h1[rel^="external"] { color: red; }

Un exemple réel de ce cas de figure pourrait être : vous voulez appliquer un style différent pour le lien renvoyant au site de votre ami, que ce soit sa page d'accueil, ou n'importe quelle page vers laquelle vous renvoyez.

//CSS
a[href^="http://perishablepress.com"] { color: red; }

Le lien vers la page principale, mais aussi vers toutes les autres pages du site sont ciblés.

[rel$=external]

L'attribut se termine avec une certaine valeur
Nous pouvons sélectionner en fonction du début, pourquoi pas aussi en fonction de la fin ?

//HTML
<h1 rel="friend external">Attribute Ends</h1>

//CSS
h1[rel$="external"] { color: red; }

Pour être honnête, je dois me gratter la tête pour trouver un exemple réel, mais peut-être qu'on pourrait imaginer que vous souhaitiez chercher des caractères n'ayant pas d'effet particulier :

//CSS
a[href$="#"], a[href$=?] { color: red; }

On pourrait aussi l'utiliser pour cibler les liens se terminant par ".pdf" si l'on voulait leur ajouter une petite icône distinctive.

[rel~=external]

L'attribut est situé à l'intérieur d'une liste, entre deux espaces
Comme vous le savez, on peut appliquer des classes multiples, et lorsqu'on le fait on peut utiliser .nom-de-la-classe pour cibler n'importe laquelle. Avec les sélecteurs d'attributs ce n'est pas aussi facile. Si votre attribut a des valeurs multiples (c'est à dire des valeurs séparées par un espace dans une liste), il faudra utiliser "~=" :

//HTML
<h1 rel="friend external sandwich">Attribute Space Separated</h1>

//CSS
h1[rel~="external"] { color: red; }

Vous vous demandez peut-être pourquoi diable utiliser cette syntaxe si *= ferait tout aussi bien l'affaire ? C'est vrai *= peut servir à tout, et dans certains cas ça peut être trop : ~= exige qu'il y ait un espace avant et après la valeur ciblée, ce qui n'est pas le cas de *=, donc si par exemple vous aviez deux éléments, l'un avec rel="home friend-link" et l'autre avec rel="home friend link", il faudrait utiliser ~= si vous vouliez ne cibler que le deuxième élément.

[title=one][rel^=external]

Cibler des attributs multiples
Il est important de noter que vous pouvez utiliser plusieurs sélecteurs d'attributs dans le même sélecteur, ce qui appliquera le style si tous les critères sont remplis :

//HTML
<h1 rel="handsome" title="Important note">Multiple Attributes</h1>

//CSS
h1[rel="handsome"][title^="Important"] { color: red; }

À lire également dans La Cascade :

Combinateurs et pseudo-classes CSS, par Steven Bradley


Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Les sélecteurs CSS, par Yoyo design (traduction de la spécification W3C)
Les sélecteurs en CSS3, par développez.com
Les sélecteurs CSS, par css.sutterlity

articles en anglais :

Table de compatibilité des sélecteurs CSS, par quirksmode
Un lien indirect mais intéressant, l'ordre des attributs (au sens large, classes, id, rel, etc.) dans HTML, un extrait de l'excellent code des guides des style de Mark Otto (en anglais)


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.