La sélection par attribut est certainement la plus puissante de toutes. De nombreux éléments des attributs obligatoires et d'autres nous permettant d'agir librement sur les éléments, il deviendra alors possible de tout sélectionner en le pointant par un attribut, s'il en contient, ainsi que par ses éventuelles valeurs.
De nombreuses utilisations sont envisageables et nous nous contenterons ici de quelques exemples pour illustrer les possibilités.
La règle CSS pour ce type de sélection est :
element[attribut]
{propriete
:valeur
; }
Pour cela notre HTML doit être légèrement adapté par exemple en ajoutant une balise a sans son attribut href :
<h1>Utiliser du <abbr>CSS3</abbr> avec du <abbr>HTML5</abbr></h1> <p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href="http://w3.org"> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses <a>prédécesseurs</a>, dans la même logique de perfectionnement que le <abbr>HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p>
a[href]
{color
:green
; }
Notre second lien placé sur prédécesseur est alors exclu de la modification.
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Ce second cas est régulièrement utilisé pour les éléments de formulaires et dans les sites multilingues lorsqu'il s'agit de repérer les langues dans la page.
Construisons simplement un petit formulaire.
<form> <input type=«text» value=«coucou» /> <input type=«submit» /> </form>
La règle CSS qui va s'appliquer pour modifier l'aspect du champ de type text sera :
input[type=text]
{color
:green
; }
Cela permet d'obtenir le résultat suivant :
Comme il est toujours possible d'être plus précis, nous pourrons effectuer des sélections par des recherches de correspondances de valeur d'attribut selon différents critères. Les principaux sont :
Passons ces possibilités en revue avec des exemples commentés. Nous utiliserons régulièrement le code HTML suivant représetant une liste de liens variée.
<ul>
<li><a href="http://google.fr" hreflang="en"/>Lien1</a></li>
<li><a href="http://activdesign.eu/integrateurweb" hreflang="en"/>Lien2</a></li>
<li><a href="ftp://activdesign.eu/file.zip" hreflang="fr"/>Lien3</a></li>
<li><a href="http://activdesign.eu/integrationweb-fr.pdf" hreflang="fr" download/>Lien4</a></li>
<li><a href="http://activdesign.eu/integrationweb-en.pdf" hreflang="en"/>Lien5</a></li>
</ul>
L'opérateur * va permettre de sélectionner l'élément si la valeur de l'attribut lang contient la mention fr, fut-elle fr_FR, fr_CH, fr_FR…
*[lang*=fr]
{color
:green
; }
<p>On dit quoi au monsieur qui dit merci ? <span lang="fr_FR">De rien</span>, <span lang="fr_CA">Bienvenu</span>, <span lang="fr_BE">Avec plaisir</span>, <span lang="en_EN">You're welcome</span>.</p>
On dit quoi au monsieur qui dit merci ? De rien, Bienvenu, Avec plaisir, You're welcome.
L'exemple suivant colorie automatiquement à notre liste de lien incluant le mot activdesignet ajoute un drapeau de France pour les liens envoyant vers une page française (absence de * avant le =), information connue à partir de l'attribut hreflang.
a[href*="activdesign"] {color:green}
a[hreflang="fr"]::after {
color:yellow;
content:url("http://www.netissime.com/wp-content/uploads/2012/11/france.png");
margin-left:10px;
}
L'opérateur ^ permet de spécifier que le motif cherché doit apparaître nécessaire au début de la valeur, sinon il devra être ignoré. L'exemple suivant sélectionne les éléments dont la valeur href
commence par http
, en général des liens externes.
a[href^="http"]
{color
:green
; }
<p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href="http://w3.org"> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <a href="ftp://w3.com">HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p>
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
À l'inverse la précédente, l'opérateur $ permettra de valider la correspondance si le motif est en fin de valeur uniquement. Très pratique pour les formats d'images ou les noms de domaine. Ici nous sélectionnons l'adresse qui se termine par .com.
a[href$=".com"]
{color
:green
; }
<p>Le <abbr>CSS3</abbr> est la variante en cours de recommandation par le <a href="http://w3.org"> <abbr>W3C</abbr> </a>. Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le <a href="http://w3.com">HTML5</abbr> par rapport au <abbr>HTML4</abbr>.</p>
Le CSS3 est la variante en cours de recommandation par le W3C . Elle s'inscrit, par rapport à ses prédécesseurs, dans la même logique de perfectionnement que le HTML5 par rapport au HTML4.
Notre peut être utilisée pour cet exemple par exemple en affichant de façon explicite les liens pointant vers des fichiers PDF.
a[href$="pdf"] {
background:url(http://www.esperanza.ch/interface/images/pdf-icon.gif) no-repeat right;
padding-right:25px;
}
Dans les cas où les valeurs sont une liste, on peut tester spécifiquement si le motif est un élément de la liste. Cette solution sera plus exclusive de que la recherche générale de motif avec * et n'acceptera pas les variantes telles que para12 ou spara1.
a[class~="para1"]
{color
:green
; }
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.