From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_colon_nth-child/index.html | 210 +++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 files/fr/web/css/_colon_nth-child/index.html (limited to 'files/fr/web/css/_colon_nth-child/index.html') diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..b9826680e8 --- /dev/null +++ b/files/fr/web/css/_colon_nth-child/index.html @@ -0,0 +1,210 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :nth-child(an+b) permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.

+ +
/* Cible les éléments en fonction de leur position dans */
+/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
+/* soit le type de l'élément */
+body :nth-child(4n) {
+  background-color: lime;
+}
+ +
+

Note : Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.

+
+ +

Illustrons cela avec quelques exemples :

+ + + +

Les valeurs des coefficients a et b doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble { an + b; n = 0, 1, 2, ... }.

+ +

Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.

+ +

Syntaxe

+ +

La pseudo-classe nth-child prend un seul argument qui représente le motif de répétition des éléments ciblés.

+ +

Valeurs avec un mot-clé

+ +
+
odd
+
Représente les éléments dont la position est impaire par rapport à leurs voisins.
+
even
+
Représente les éléments dont la position est paire par rapport à leurs voisins.
+
+ +

Notation fonctionnelle

+ +
+
<An+B>
+
Représente les éléments dont la position est la An+B-ième avec n qui parcourt les entiers à partir de 0. Les valeurs fournies pour A et B doivent être des entiers ({{cssxref("<integer>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemples de sélecteurs

+ +
+
tr:nth-child(2n+1)
+
Permettra de cibler les lignes impaires d'un tableau.
+
tr:nth-child(odd)
+
Permettra de cibler les lignes impaires d'un tableau.
+
tr:nth-child(2n)
+
Permettra de cibler les lignes paires d'un tableau.
+
tr:nth-child(even)
+
Permettra de cibler les lignes paires d'un tableau.
+
span:nth-child(0n+1)
+
Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.
+
span:nth-child(1)
+
Synonyme à l'exemple précédent.
+
span:nth-child(-n+3)
+
Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément span.
+
+ +

Exemple démonstratif

+ +
+

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.premier span:nth-child(2n+1),
+.deuxieme span:nth-child(2n+1),
+.troisieme span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

HTML

+ +
<p>
+  <code>span:nth-child(2n+1)</code>,
+  <em>sans</em> un <code>&lt;em&gt;</code>
+  parmi les éléments. Les éléments fils 1, 3,
+  5 et 7 sont sélectionnés.
+</p>
+
+<div class="premier">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <span>Celui-ci ?</span>
+  <span>Celui-là ?</span>
+  <span>Un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+<p>
+  <code>span:nth-child(2n+1)</code>,
+  <em>avec</em> un élément <code>&lt;em&gt;</code>
+  parmi les fils. Les éléments fils 1, 5,
+  et 7 sont sélectionnés. 3 est compté
+  mais n'est pas ciblé car ce n'est pas
+  <code>&lt;span&gt;</code>.
+</p>
+
+<div class="deuxieme">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <em>Ici on a un em.</em>
+  <span>Qu'en est-il de celui-ci ?</span>
+  <span>De celui-là ?</span>
+  <span>Voici un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+<p>
+  <code>span:nth-of-type(2n+1)</code>,
+  <em>avec</em> un <code>&lt;em&gt;</code>
+  parmi les éléments fils. Les éléments fils
+  1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
+  compté ni ciblé car c'est un <code>&lt;em&gt;</code>,
+  et pas un <code>&lt;span&gt;</code> et
+  <code>nth-of-type</code> ne sélectionne que les
+  fils de ce type. Ce <code>&lt;em&gt;</code> est
+  sauté et est ignoré.
+</p>
+
+<div class="troisieme">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <em>Ici on a un em.</em>
+  <span>Qu'en est-il de celui-ci ?</span>
+  <span>De celui-là ?</span>
+  <span>Voici un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+
+ +

Résultat

+ +
{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Ajout de la syntaxe <selector>. Les éléments ciblés peuvent ne pas avoir d'élément parent.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.nth-child")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf