On plonge dans les sélecteurs d'attributs en CSS.
Les sélecteurs d'attribut en CSS
Pour donner du style aux éléments de nos pages en CSS, il faut déjà commencer par indiquer quels éléments on veut modifier.
C'est là qu'entre en jeu les sélecteurs.
On connaît tous les sélecteurs basiques qui permettent de sélectionner un élément par son tag-name, sa class ou son ID, mais dans cet article, on va voir qu'on peut aller beaucoup plus loin, et sélectionner des éléments par leur attribut ou par la valeur de ce dernier valeur !
Le sélecteur d'attribut
En CSS, on peut très facilement sélectionner un élément grâce à ses attributs.
On va tout simplement mettre notre attribut entre crochets : [attr]
<div foo="bar">
<p foo="tor"></p>
</div>
[foo]{
padding: 30px;
}
Ici on a donné à la div et au p un padding de 30px, car tous les deux ont un attribut 'foo'.
Mais comment être plus précis ?
Sélectionner par valeur d'attribut
Prenons comme exemple cet HTML:
<p foo="bar tor"> 1 </p>
<p foo="bartor"> 2 </p>
<p foo="bar"> 3 </p>
La valeur exacte
Pour commencer, on peut sélectionner un élément grâce à la valeur exacte de son attribut :
[foo="bartor"]{
background-color: red;
}
Comme on peut le voir seul l'élément 2 est sélectionné.
Mais d'autres options s'offrent à nous.
La valeur contient la string ...
Par exemple, on peut sélectionner tous les éléments qui ont un attribut 'foo' contenant la string 'bar'.
[foo*='bar']{
background-color: red;
}
Ici tous les éléments sont sélectionnés car ils ont tous la string 'bar' dans la valeur de foo.
La valeur contient le mot ...
Mais si l'on veut sélectionner seulement les éléments qui le mot 'bar' dans la valeur de l'attribut 'foo', on utilisera ce sélecteur :
[foo~='bar']{
background-color: red;
}
Comme on peut le voir, les éléments 1 et 3 sont sélectionnés étant donné que la valeur de 'foo' des deux éléments contient le mot 'bar'. L'élément deux contient la string 'bar' mais pas le mot 'bar' (la string 'bar' n'est pas espacé de la string 'tor'), il n'est donc pas sélectionné.
La valeur commence / finis par ...
Une autre option s'offre à nous, on peut sélectionner les éléments dont la valeur de l'attribut foo' commence ou finis par une certaine string :
[foo$='tor']{
background-color: red;
}
[foo^='bar']{
color: green;
}
On voit ici que les éléments 1 et 2 ont une background-color rouge, et que tous les éléments ont leur texte en vert.
On peut donc en déduire que :
[foo$='tor']pourrait se traduire comme, tous les éléments qui ont l'attribut foo avec une valeur finissant par la string "tor".[foo^='bar']pourrait se traduire comme, tous les éléments qui ont l'attribut foo avec une valeur commençant par la string "bar".