diff --git a/files/fr/web/css/_colon_nth-child/index.md b/files/fr/web/css/_colon_nth-child/index.md index 6112e731999dd5..c7c7f0c79bab18 100644 --- a/files/fr/web/css/_colon_nth-child/index.md +++ b/files/fr/web/css/_colon_nth-child/index.md @@ -1,163 +1,477 @@ --- title: ":nth-child" slug: Web/CSS/:nth-child +l10n: + sourceCommit: eb061bd719102c148cf87d12fd7056ed0c5071c8 --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-child()`** permet de cibler les éléments en ce basant sur l'indice des éléments dans la liste des enfants de leur 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. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-child()`** permet de cibler les éléments en se basant sur l'indice des éléments dans la liste des enfants de leur parent. Autrement dit, un sélecteur utilisant cette pseudo-classe ciblera les éléments selon leur position parmi leurs voisins appartenant à un même parent. -```css -/* 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 : +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-child.html", "tabbed-shorter")}} -- `1n+0` ou `n` ciblera chaque élément fils. `n` ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'`1n` fonctionne. `1n` est synonyme de `1n+0` et les deux peuvent donc être utilisés de façon équivalente. -- `2n+0` ou `2n` ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé **`even`** à la place de cette expression. -- `2n+1` ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé **`odd`** à la place de cette expression. -- `3n+4` permettra de cibler les éléments fils 4, 7, 10, 13, etc. -- `0n+3` (ou plus simplement `3`) permettra de cibler le troisième élément. - -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. +> [!NOTE] +> Avec la syntaxe `element:nth-child()`, le nombre d'enfants compte les enfants voisins de n'importe quel type ; toutefois, il y a uniquement correspondance lorsque l'élément _à cette position parmi les enfants_ correspond aux autres composantes du sélecteur. ## Syntaxe -La pseudo-classe `nth-child` prend un seul argument qui représente le motif de répétition des éléments ciblés. +`:nth-child()` prend un seul argument, qui décrit un motif de correspondance basé sur les indices des éléments d'une liste de voisin. Les indices des éléments démarrent à 1. + +```css-nolint +:nth-child( [of ]?) { + /* ... */ +} +``` ### Valeurs avec un mot-clé - `odd` - - : Représente les éléments dont la position est impaire par rapport à leurs voisins. + - : Représente les éléments dont la position numérique est impaire parmi la liste des voisins (1, 3, 5, etc.). - `even` - - : Représente les éléments dont la position est paire par rapport à leurs voisins. + - : Représente les éléments dont la position numérique est paire parmi la liste des voisins (2, 4, 6, etc.). ### Notation fonctionnelle - `` - - : 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 + - : Représente les éléments dont la position numérique au sein de la liste des voisins correspond au motif `An+B`, pour chaque entier positif `n`, où : -{{csssyntax}} + - `A` est un incrément entier, + - `B` est un décalage entier, + - `n` représente les entiers positifs à partir de 0. + + Autrement dit, on cible les `An+B`-ième éléments de la liste. `A` et `B` doivent tout deux être des [valeurs entières (type CSS ``)](/fr/docs/Web/CSS/integer). + +### La syntaxe `of ` + +En passant un sélecteur en argument, on peut cibler le **n-ième** élément qui correspond à ce sélecteur. Ainsi, le sélecteur suivant cible les trois premiers éléments d'une liste qui ont `class="important"`. + +```css +:nth-child(-n + 3 of li.important) { +} +``` + +Le résultat obtenu est différent si on sort le sélecteur de la fonction : + +```css +li.important:nth-child(-n + 3) { +} +``` + +Dans ce deuxième cas, le sélecteur cible les éléments d'une liste s'ils font partie des trois premiers enfants et qu'ils correspondent au sélecteur `li.important`. ## 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 +- `tr:nth-child(odd)` ou `tr:nth-child(2n+1)` + - : Cible les lignes impaires d'un tableau HTML : 1, 3, 5, etc. +- `tr:nth-child(even)` ou `tr:nth-child(2n)` + - : Cible les lignes paires d'un tableau HTML  : 2, 4, 6, etc. +- `:nth-child(7)` + - : Cible le septième élément. +- `:nth-child(5n)` + - : Cible les éléments **5** \[=5×1], **10** \[=5×2], **15** \[=5×3], **etc.** La première valeur correspondant à cette formule est **0** \[=5x0], mais ne correspond à aucun élément, car ils sont indexés à partir de 1, même si `n` commence à 0. Cela peut sembler étrange, mais prend du sens quand on note que le coefficient `B` de la formule est strictement positif (`>0`), comme dans les exemples suivants. +- `:nth-child(n+7)` + - : Cible le septième élément et ceux qui suivent : **7** \[=0+7], **8** \[=1+7], **9** \[=2+7], **etc.** +- `:nth-child(3n+4)` + - : Cible les éléments **4** \[=(3×0)+4], **7** \[=(3×1)+4], **10** \[=(3×2)+4], **13** \[=(3×3)+4], **etc.** +- `:nth-child(-n+3)` + - : Cible les trois premiers éléments. \[=-0+3, -1+3, -2+3] +- `p:nth-child(n)` + - : Cible tous les éléments `

` d'un groupe de voisins. Cela sélectionne les mêmes éléments que le sélecteur simple `p` (mais avec une spécificité supérieure). +- `p:nth-child(1)` ou `p:nth-child(0n+1)` + - : Cible tout élément `

` qui est le premier élément d'un group de voisin. Cette forme est équivalente au sélecteur [`:first-child`](/fr/docs/Web/CSS/:first-child) (et possède la même spécificité). +- `p:nth-child(n+8):nth-child(-n+15)` + - : Cible du huitième jusqu'au quinzième élément `

` d'un groupe de voisins. + +### Exemple détaillé + +#### HTML + +```html +

+ span:nth-child(2n+1), sans <em> parmi les + éléments enfants. +

+

Les enfants 1, 3, 5, et 7 sont sélectionnés.

+
+ Span 1 ! + Span 2 + Span 3 ! + Span 4 + Span 5 ! + Span 6 + Span 7 ! +
+ +
+ +

+ span:nth-child(2n+1), avec un <em> parmi les + éléments enfants. +

+

+ Les enfants 1, 5, et 7 sont ciblés.
+ 3 est utilisé dans le compteur et est un enfant, mais il n'est pas ciblé, car + ce n'est pas un <span>. +

+
+ Span ! + Span + Voici un `em`. + Span + Span ! + Span + Span ! + Span +
+ +
+ +

+ span:nth-of-type(2n+1), avec un <em> parmi les + éléments enfants. +

+

+ Les enfants 1, 4, 6, et 8 sont ciblés.
+ 3 n'est pas utilisé pour le compteur ou ciblé, car c'est un élément + <em>, pas un <span>, et + nth-of-type cible uniquement les enfants de ce type. L'élément + <em> est complètement ignoré. +

+
+ Span ! + Span + Voici un `em`. + Span ! + Span + Span ! + Span + Span ! +
+``` #### CSS -```css -html { +```css hidden +* { font-family: sans-serif; } span, div em { - padding: 10px; - border: 1px solid green; + padding: 5px; + border: 1px solid tomato; display: inline-block; margin-bottom: 3px; } +``` +```css .premier span:nth-child(2n + 1), .deuxieme span:nth-child(2n + 1), .troisieme span:nth-of-type(2n + 1) { - background-color: lime; + background-color: tomato; } ``` +#### Résultat + +{{EmbedLiveSample('Exemple_détaillé', 550, 550)}} + +### Utiliser `of` + +Dans cet exemple, nous avons une liste de noms non-ordonnée, certains sont marqués comme **notés** à l'aide de `class="noted"`. Ceux-là ont été mis en avant avec une bordure inférieure épaisse. + #### HTML ```html -

- span:nth-child(2n+1), sans un <em> - parmi les éléments. Les éléments fils 1, 3, 5 et 7 sont sélectionnés. -

+
    +
  • Diego
    • +
  • Shilpa
    • +
  • Caterina
    • +
  • Jayla
    • +
  • Tyrone
    • +
  • Ricardo
    • +
  • Gila
    • +
  • Sienna
    • +
  • Titilayo
    • +
  • Lexi
    • +
  • Aylin
    • +
  • Leo
    • +
  • Leyla
    • +
  • Bruce
    • +
  • Aisha
    • +
  • Veronica
    • +
  • Kyouko
    • +
  • Shireen
    • +
  • Tanya
    • +
  • Marlene
    • +
+``` -
- Ce span est sélectionné ! - Pas ce span ci. :( - Celui-ci ? - Celui-là ? - Un autre exemple - Et encore un - Puis un dernier -
+#### CSS -

- span:nth-child(2n+1), avec un élément - <em> - 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 - <span>. -

+```css hidden +* { + font-family: sans-serif; +} -
- Ce span est sélectionné ! - Pas ce span ci. :( - Ici on a un em. - Qu'en est-il de celui-ci ? - De celui-là ? - Voici un autre exemple - Et encore un - Puis un dernier -
+ul { + display: flex; + flex-wrap: wrap; + list-style: none; + font-size: 1.2rem; + padding-left: 0; +} -

- span:nth-of-type(2n+1), avec un - <em> 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 - <em>, et pas un <span> et - nth-of-type ne sélectionne que les fils de ce type. Ce - <em> est sauté et est ignoré. -

+li { + margin: 0.125rem; + padding: 0.25rem; +} -
- Ce span est sélectionné ! - Pas ce span ci. :( - Ici on a un em. - Qu'en est-il de celui-ci ? - De celui-là ? - Voici un autre exemple - Et encore un - Puis un dernier +li { + border: 1px solid tomato; +} + +.noted { + border-bottom: 5px solid tomato; +} +``` + +Avec le CSS qui suit, nous ciblons les éléments de la liste **pairs** parmi ceux qui ont `class="noted"`. + +```css +li:nth-child(even of .noted) { + background-color: tomato; + border-bottom-color: seagreen; +} +``` + +#### Résultat + +Les éléments avec `class="noted"` ont une bordure inférieure plus épaisse et les éléments 3, 10 et 17 ont un arrière-plan coloré, car ils sont les éléments _pairs_ de la liste des éléments ayant `class="noted"`. + +{{EmbedLiveSample('', 550, 120)}} + +### Syntaxe `of` et sélecteur du n-ième enfant + +Dans cet exemple, nous avons deux listes de noms non-ordonnées. La première liste illustre l'effet de `li:nth-child(-n + 3 of .noted)` et la seconde celui de `li.noted:nth-child(-n + 3)`. + +#### HTML + +```html +
    +
  • Diego
    • +
  • Shilpa
    • +
  • Caterina
    • +
  • Jayla
    • +
  • Tyrone
    • +
  • Ricardo
    • +
  • Gila
    • +
  • Sienna
    • +
  • Titilayo
    • +
  • Lexi
    • +
+
    +
  • Diego
    • +
  • Shilpa
    • +
  • Caterina
    • +
  • Jayla
    • +
  • Tyrone
    • +
  • Ricardo
    • +
  • Gila
    • +
  • Sienna
    • +
  • Titilayo
    • +
  • Lexi
    • +
+``` + +#### CSS + +```css hidden +* { + font-family: sans-serif; +} + +ul { + display: flex; + flex-wrap: wrap; + list-style: none; + font-size: 1.2rem; + padding-left: 0; +} + +li { + margin: 0.125rem; + padding: 0.25rem; +} + +li { + border: 1px solid tomato; +} + +.noted { + border-bottom: 5px solid tomato; +} +``` + +```css +ul.one > li:nth-child(-n + 3 of .noted) { + background-color: tomato; + border-bottom-color: seagreen; +} + +ul.two > li.noted:nth-child(-n + 3) { + background-color: tomato; + border-bottom-color: seagreen; +} +``` + +#### Résultat + +Dans le premier cas, on applique le style aux trois premiers éléments de la liste ayant `class="noted"`, qu'ils soient ou non parmi les trois premiers éléments de la liste. + +Dans le second cas, on applique le style aux éléments ayant `class="noted"` s'ils font partie des trois premiers éléments de la liste. + +{{EmbedLiveSample('', 550, 150)}} + +### Utiliser `of` pour corriger les tableaux à bandes alternées + +Il est fréquent d'utiliser des lignes alternant entre clair et sombre afin de faciliter la lecture d'un tableau et le rendre plus accessible. Toutefois, si on masque une ligne, les bandes apparaîtront comme fusionnées et empêcheront l'effet escompté. Dans cet exemple, vous pouvez voir deux tableaux qui possèdent une ligne masquée (avec `hidden`). Dans le second tableau, on gère les lignes masquées à l'aide de `of :not([hidden])`. + +#### HTML + +```html-nolint hidden +
+``` + +```html-nolint + + + + + + + + + + + + +
NomÂgePays
Mamitiana23Madagascar
Yuki48Japon
Adilah27Maroc
Vieno55Finlande
Ricardo66Brésil
+ + + + + + + + + + + + +
NomÂgePays
Mamitiana23Madagascar
Yuki48Japon
Adilah27Maroc
Vieno55Finlande
Ricardo66Brésil
+``` + +```html hidden
``` +#### CSS + +```css hidden +.wrapper { + display: flex; + justify-content: space-around; +} +td { + padding: 0.125rem 0.5rem; +} +``` + +```css +.broken > tbody > tr:nth-child(even) { + background-color: silver; +} +``` + +```css +.fixed > tbody > tr:nth-child(even of :not([hidden])) { + background-color: silver; +} +``` + +#### Résultat + +Dans le premier tableau, on utilise simplement `:nth-child(even)`, qui cible la troisième ligne, également dotée de l'attribut `hidden`. On a donc la troisième ligne qui n'est pas visible et la deuxième et la quatrième qui sont comptées comme paires. Si c'est vrai sur le plan technique (l'arborescence du document), ce n'est pas le cas visuellement. + +Dans le second tableau, on utilise la syntaxe `of` afin de cibler uniquement les lignes (`tr`) qui **ne sont pas** masquées, à l'aide de `:nth-child(even of :not([hidden]))`. + +{{EmbedLiveSample('', 550, 180)}} + +### Mettre en forme une colonne de tableau + +Pour mettre en forme une colonne de tableau, on ne peut pas cibler l'élément [``](/fr/docs/Web/HTML/Element/col), car les cellules du tableau n'en sont pas des enfants (alors que les cellules sont bien des enfants des lignes [``](/fr/docs/Web/HTML/Element/tr)). Les pseudo-classes comme `:nth-child()` s'avèrent alors particulièrement utiles pour sélectionner les cellules d'une colonne. + +Dans cet exemple, on applique différents styles pour chaque colonne. + +#### HTML + +```html-nolint + + ++ + + + + + + + + + + +
Liste des élèves
NomÂgePays
Mamitiana23Madagascar
Yuki48Japon
+ +``` + +#### CSS + +```css +td { + padding: 0.125rem 0.5rem; + height: 3rem; + border: 1px solid black; +} + +tr :nth-child(1) { + text-align: left; + vertical-align: bottom; + background-color: silver; +} + +tbody tr :nth-child(2) { + text-align: center; + vertical-align: middle; +} + +tbody tr :nth-child(3) { + text-align: right; + vertical-align: top; + background-color: tomato; +} +``` + #### Résultat -{{EmbedLiveSample('Exemple_démonstratif','100%', '550')}} +{{EmbedLiveSample('', 100, 200)}} -## Spécifications +## Specifications {{Specifications}} @@ -167,6 +481,8 @@ div em { ## Voir aussi -- {{cssxref(":nth-of-type")}} -- {{cssxref(":first-child")}} -- {{cssxref(":last-child")}} +- [`:nth-of-type()`](/fr/docs/Web/CSS/:nth-of-type) +- [`:nth-last-child()`](/fr/docs/Web/CSS/:nth-last-child) +- La pseudo-classe [`:has()`](/fr/docs/Web/CSS/:has) qui cible l'élément parent +- [Les pseudo-classes relatives à l'arborescence](/fr/docs/Web/CSS/Pseudo-classes#pseudo-classes_relatives_%C3%A0_larborescence) +- Le module relatif [aux sélecteurs CSS](/fr/docs/Web/CSS/CSS_selectors)