TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les sélecteurs d'adjacence

l'unique successeur direct (CSS2)

L'operateur + des sélecteur CSS2 permet d'atteindre l'élément successeur direct d'un élément

Pour sélectionner tout élément Y successeur direct d'un élément X

non note :

Ainsi h2 + p sélectionne tout paragraphe successeur d'un titre h2

tous les successeurs (CSS3)

L'operateur ~ des sélecteur CSS3 permet d'atteindre les éléments successeurs d'un élément

Les successeurs ne sont pas nécéssairement consécutifs

Ainsi h2 ~ p sélectionne tous les paragraphes successeurs d'un titre h2

Et h1 ~ h2 selectionne tous les titres h2 successeurs d'un élément h1

Bien que l'opérateur + soit plus spécifique l'opérateur ~ , ils ont la même priorité selon les règles de la cascade

Les sélecteurs d'attributs

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

Présence d'attribut (CSS2)

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

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

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

Valeur exacte d'attribut (CSS2)

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

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 exactes de plusieurs attributs :

Valeur d'attribut parmi un ensemble de valeur (CSS2)

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:

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 (CSS2)

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 :

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() )

 

Valeur d'attribut commençant par une suite de caractères donnée (CSS3)

Pour ne sélectionner que les éléments dotés d'un attribut dont la valeur commence par une chaine donnée, on note :

Ainsi a[href ^= "http://"] permet de sélectionner tous les liens externes

Valeur d'attribut se terminant par une suite de caractèrs donnée (CSS3)

Pour ne sélectionner que les éléments dotés d'un attribut dont la valeur se termine par une chaine donnée, on note :

Ainsi a[href $= ".fr"] permet de sélectionner tous les liens se terminant en ".fr"

Valeur d'attribut contenant une suite de caractères donnée (CSS3)

Pour ne sélectionner que les éléments dotés d'un attribut dont la valeur contient une chaine donnée, on note :

Ainsi p[title *= "html"] permet de sélectionner les paragraphes suivants :

Pseudo-classes

CSS3 introduit de nouvelles pseudo classes

La pseudo classe :root

La pseudo classe :root permet de sélectionner la racine d'un document. Dans le cas d'un document "html" il s'agit bien entendu de l'élément html lui-même. Le sélecteur :root prend tout son intérêt dans le cas d'un document XML.

La pseudo classe :nth-child(expression)

elt:nth-child(k), permet d'atteindre tout élément elt qui est le kieme enfant de son parent

Soit le code suivant :

et les définitions CSS :

On obtient le résultat :

1:terme 1
2:definition 1
3:terme 2 (troisième élément (dt))
4:definition 2
5:terme 3 (cinquième élément)
6:definition 3
7:terme 4
8:definition 4
9:terme 5
10:definition 5
11:terme 6
12:definition 6

La seconde déclaration CSS (dd:nth-child(3) {color : blue;}) ne concerne aucun élément car le troisième enfant n'est pas un élément dd.

Dans la déclaration :nth-child(expression), expression peut être un nombre ou un terme de la forme xn + y ou x et y sont des nombres.

Ainsi :nth-child(2n + 1) concernera tous les éléments d'ordre impair et :nth-child(3n + 0) concernera tous les éléments dont l'ordre est un multiple de 3.

:nth-last-child(expression)

:nth-last-child(expression) fonctionne selon le même principe que :nth-child(expression) sinon que la position est déterminée en partant du dernier enfant.

En reprenant la liste de définitions précédente avec la CSS ci-dessous :

on obtient le résultat suivant :

1:terme 1
2:definition 1
3:terme 2
4:definition 2
5:terme 3
6:definition 3
7:terme 4
8:definition 4 (cinquième élément en partant de la fin)
9:terme 5
10:definition 5 (troisième élément (dd) en partant de la fin)
11:terme 6
12:definition 6

Le premier sélecteur (dt:nth-last-child(3) {color : red;}) ne s'applique à aucun élément puisque le troisième enfant de l'élément dl en partant de la fin est un élément dd et non dt.

Comme pour le sélecteur "nth-child", dans la déclaration :nth-last-child(expression), expression peut être un nombre ou un terme de la forme xn + y ou x et y sont des nombres.

:nth-of-type(expression)

elt:nth-of-type(k), permet d'atteindre tout élément elt qui est le kieme enfant de type elt de son de son parent

1:terme 1
2:definition 1
3:terme 2
4:definition 2
5:terme 3 (troisième élément de type dt)
6:definition 3 (troisième élément de type dd)
7:terme 4
8:definition 4
9:terme 5 (cinquième élément de type dt)
10:definition 5
11:terme 6
12:definition 6

Comme pour le sélecteur "nth-child" et "nth-last-child", dans la déclaration :nth-of-type(expression), expression peut être un nombre ou un terme de la forme xn + y ou x et y sont des nombres.

:nth-last-of-type(expression)

elt:nth-last-of-type(k), permet d'atteindre tout élément elt qui est le kieme enfant de type elt de son de son parent en partant du dernier enfant

1:terme 1
2:definition 1
3:terme 2 (cinquième élément de type dt en partant de la fin)
4:definition 2 (cinquième élément de type dt en partant de la fin)
5:terme 3 (troisième élément de type dt)
6:definition 3 (troisième élément de type dd)
7:terme 4 (troisième élément de type dt en partant de la fin)
8:definition 4 (troisième élément de type dd en partant de la fin)
9:terme 5 (cinquième élément de type dt)
10:definition 5 (cinquième élément de type dd)
11:terme 6
12:definition 6

Raccourcis

:first-child ≡ nth-child(1)

:last-child ≡ :nth-last-child(1)

:first-of-type ≡ :nth-of-type(1)

:last-of-type ≡ :nth-last-of-type(1)

:nth-child(2n + 0) ≡ nth-child(even)

:nth-child(2n + 1) ≡ nth-child(odd)

La pseudo-classe :only-child

La pseudo-classe :only-child permet de sélectionner un élément qui est l'unique enfant de son parent

Ainsi, li:only-child sélectionne les éléments li des listes à un seul item

La pseudo-classe :empty

Cette pseudo classe s'adresse aux éléments vides de tout contenu affichable

1

La pseudo-class :not()

La pseudo-classe not() permet la sélection d'éléments autres que ceux spécifiés dans l'argument de la négation

On précise dans les parenthèses de la négation le critère de non sélection

Le critère peut être un nom d'élément, un nom de classe, un nom d'identifiant, une pseudo-classe, mais pas un sélecteur composé

Soit le code suivant :

1:terme 1
2:definition 1
3:terme 2
4:definition 2
5:terme 3
6:definition 3 (élément de classe "special")
7:terme 4
8:definition 4
9:terme 5 (élément d'id "id0")
10:definition 5
11:terme 6
12:definition 6
1:terme 1
2:definition 1
3:terme 2
4:definition 2
5:terme 3
6:definition 3 (élément de classe "special")
7:terme 4
8:definition 4
9:terme 5 (élément d'id "id0")
10:definition 5
11:terme 6
12:definition 6

Limite : on ne peut utiliser des sélecteurs combinés comme argument de :not()

La pseudo-classe :target

La pseudo-classe :target permet de sélectionner un élément ciblé par un lien

L'élément ciblé est désigné par son identifiant

Pseudos-éléments

Nouvelle notation des pseudo-éléments CSS2

En CSS3 les pseudos-éléments sont notés en utilisant l'opérateur "::" et non ":" comme en CSS2

Ainsi on retrouve les pseudo-éléments ::first-line, ::first-letter, ::before et ::after avec la même sémantique qu'en CSS2.

Le pseudo-élément ::selection

Le selecteur ::selection permet d'appliquer des propriétés CSS à la sélection courante.

Ainsi p::selection s'applique à tout paragraphe sélectionné.

Fonctionne avec Chrome, mais pas pas avec Firefox.

Ne concerne que certaines propriétés telles la couleur, la couleur de fond ou l'ombrage du texte

Dans cette page ces propriétés sont appliquées aux titres h2 sélectionnés par l'utilisateur ainsi qu'aux paragraphes de cette section

Pseudos-classes de formulaires

:enabled et :disabled

permet de sélectionner un élément input activé ou désactivé

:valid et :invalid

permet de sélectionner un élément input activé ou désactivé

:checked et :indeterminate

permet de sélectionner un élément input ayant pour attribut type="checkbox" ou type="radio" qui est coché

Homme
Femme

langues :

:in-range et out-of-range :

permet de sélectionner un élément input ayant un attribut de type numérique selon que la valeur saisie appartienne à l'intervalle requis ou non

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007