CSS3
Sélectionner des balises selon les attributs
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.
Appliquer une règle si l'attribut est présent
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.
Utiliser du CSS3 avec du HTML5
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.
Appliquer une règle si l'attribut a une certaine valeur
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 :
Appliquer une règle si l'attribut ressemble à une valeur
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 :
- reconnaître si un motif donné est dans la valeur ;
- reconnaître la position du motif dans la valeur, au début ou à la fin ;
- reconnaître si le motif est une des multiples valeurs de l'attribut.
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>
Recherche d'un motif
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;
}
Recherche d'un motif en début de valeur
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.
Recherche d'un motif en fin de valeur
À 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;
}
Recherche d'un motif présent parmi les valeurs d'un attribut
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; }