TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les sélecteurs d'attribut

Les sélecteurs d'attribut portent sur la présence ou la valeur d'un attribut

Présence d'attribut

Pour ne sélectionner que les éléments dotés d'un attribut de nom donné on note :

nom_elt[nom_attribut]

Ainsi p[style] ne portera que sur les paragraphes enrichis d'un attribut style.

Il est possible d'imposer la présence de plusieurs attributs :

elt[attr1][attr2]...[attrN]

Valeur d'attribut

Pour ne sélectionner que les éléments dotés d'un attribut de nom donné ayant une certaine valeur on note :

nom_elt[nom_attribut="valeur"]

Ainsi img[alt="logo"] ne portera que sur les images enrichies d'un attribut "alt" ayant pour valeur "logo"

On peut imposer plusieurs contraintes simultannées sur les valeurs de plusieurs attributs distincts :

elt[attr1="val1"][attr2="val2"]...[attrN="valN"]

Valeur d'attribut parmi un ensemble de valeur

La valeur de certains attributs peut être composée de plusieurs termes séparés par un espace. Par exemple : <p class="exemple important"> ou <h1 title="La planete bleue">

Pour ne sélectionner que les éléments dotés d'un attribut de nom donné, comprenant, parmi ses multiples valeurs, une valeur fixée on note:

nom_elt[nom_attribut~="valeur"]

Ainsi p[class~="exemple"]  et p[class~="important"] sélectionnent tous deux les paragraphes <p class="exemple important">

Notons que :

elt[classe~="nom_classe"] est équivalent à elt.nom_classe ( notation des classes)

et plus généralement

elt[classe~="classe1"][classe~="classe2"]... [classe~=" classeN"] équivalent à elt.nom_classe1.classe 2 ...   .classeN

Remarque : bien que les notations ci-dessus soient équivalentes leurs priorités sont différentes selon les règles de la cascade.

Attribut correspondant à la première valeur d'un ensemble de valeurs

La valeur de certains attributs peuvent être composés de plusieurs termes séparés par un tiret. C'est le cas pour l'attribut lang : <p lang="fr-ca">

Pour ne sélectionner que les éléments dotés d'un attribut dont le premier terme (avant le premier tiret) prend une valeur donnée on note :

nom_elt[nom_attribut|=valeur]

Ainsi p[lang|="fr"]  sélectionne le paragraphe <p lang="fr-ca"> ou <p lang="fr">

Notons que

elt[lang="nom_lang"] est équivalent à elt:lang(nom_lang) ( pseudo-classe :lang() )

 

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007