Le :nth-childsélecteur vous permet de sélectionner un ou plusieurs éléments en fonction de leur ordre d'origine, selon une formule.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )Elle est définie dans la spécification CSS Selectors Level 3 comme une «pseudo-classe structurelle», ce qui signifie qu'elle est utilisée pour styliser le contenu en fonction de sa relation avec les éléments parents et frères.
Supposons que nous construisions une grille CSS et que nous souhaitions supprimer la marge sur chaque quatrième module de grille. Voici ce HTML:
One Two Three Four Five Plutôt que d'ajouter une classe à chaque quatrième élément (par exemple .last), nous pouvons utiliser :nth-child:
.module:nth-child(4n) ( margin-right: 0; )Le :nth-childsélecteur prend un argument: cela peut être un entier, les mots clés even, oddou une formule. Si un entier est spécifié, un seul élément est sélectionné, mais les mots-clés ou une formule parcourent tous les enfants de l'élément parent et sélectionnent les éléments correspondants - comme pour parcourir les éléments dans un tableau JavaScript. Les mots clés «pair» et «impair» sont simples (respectivement 2, 4, 6, etc. ou 1, 3, 5). La formule est construite en utilisant la syntaxe an+b, où:
- "A" est une valeur entière
- «N» est la lettre littérale «n»
- «+» Est un opérateur et peut être «+» ou «-»
- «B» est un entier et est obligatoire si un opérateur est inclus dans la formule
Il est important de noter que cette formule est une équation, et itère à travers chaque élément frère, déterminant lequel sera sélectionné. La partie «n» de la formule, si elle est incluse, représente un ensemble d'entiers positifs croissants (tout comme l'itération dans un tableau). Dans notre exemple ci-dessus, nous avons sélectionné un élément sur quatre avec la formule 4n, ce qui fonctionnait car à chaque fois qu'un élément était vérifié, «n» augmentait de un (4 × 0, 4 × 1, 4 × 2, 4 × 3, etc.). Si l'ordre d'un élément correspond au résultat de l'équation, il est sélectionné (4, 8, 12, etc.). Pour une explication plus approfondie des mathématiques impliquées, veuillez lire cet article.
Pour illustrer davantage, voici quelques exemples de :nth-childsélecteurs valides :
Heureusement, vous n'avez pas toujours à faire le calcul vous-même - il existe plusieurs :nth-childtesteurs et générateurs:
- Testeur CSS-Tricks
- Testeur de Lea Verou
: nième enfant (an + b de)
Il existe un filtre peu connu auquel on peut ajouter :nth-childselon la spécification CSS Selectors: la possibilité de sélectionner le :nth-childd'un sous-ensemble d'éléments, en utilisant le of format. Supposons que vous ayez une liste de contenu mixte: certains ont la classe .video, d'autres la classe .pictureet vous voulez sélectionner les 3 premières images. Vous pouvez le faire avec le filtre «de» comme suit:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Notez que cela est différent de l'ajout d'un sélecteur directement au :nth-childsélecteur:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Cela peut être un peu déroutant, donc un exemple peut aider à illustrer la différence:
La prise en charge par le navigateur du filtre «of» est très limitée: à ce jour, seul Safari supportait la syntaxe. Pour vérifier l'état de votre navigateur préféré, voici les problèmes en suspens liés à :nth-child(an+b of s):
- Firefox: prise en charge de nth-child (An + B of sel)
- Chrome: implémenter: nth-child (an + b of S)
Points d'interêts
:nth-childitère parmi les éléments en commençant par le haut de l'ordre source. La seule différence entre lui et:nth-last-childest que ce dernier itère à travers les éléments en commençant par le bas de l'ordre source.- La syntaxe de sélection du premier
nnombre d'éléments est un peu contre-intuitive. Vous commencez par-n, plus le nombre positif d'éléments que vous souhaitez sélectionner. Par exemple,li:nth-child(-n+3)sélectionnera les 3 premiersliéléments. - Le
:nth-childsélecteur est très similaire à:nth-of-typemais avec une différence critique: il est moins spécifique. Dans notre exemple ci-dessus, ils produiraient le même résultat parce que nous n'itérons que des.moduleéléments, mais si nous itérions sur un groupe plus complexe de frères et sœurs,:nth-childnous essaierions de faire correspondre tous les frères et sœurs, pas seulement les frères du même type d'élément. Cela révèle la puissance de:nth-child-it peut sélectionner n'importe quel élément frère dans un arrangement, pas seulement les éléments qui sont spécifiés avant les deux-points.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3.2+ | Tout | 9.5+ | 9+ | Tout | Tout |
:nth-childa été introduit dans CSS Selectors Module 3, ce qui signifie que les anciennes versions des navigateurs ne le prennent pas en charge. Cependant, la prise en charge des navigateurs modernes est irréprochable et les nouveaux pseudo-sélecteurs sont largement utilisés dans les environnements de production. Si vous avez besoin d'un support de navigateur plus ancien, polyfill pour IE ou utilisez ces sélecteurs de manière non critique à une amélioration progressive, ce qui est recommandé.