Cuisine et Web

La pseudo classe :nth-child(X) permet de cibler un élement sur une position unique.

La pseudo classe :nth-child(Xn) permet de cibler un élement se situant toutes les N positions.

Par exemple, pour cibler tout les element se trouvant en quatriéme, huitiéme, douziéme, etc.. position: :nth-child(4n){} fera le travail.

Il est alors possible de mettre en place un motif visuel répétitif (pattern en anglais).

Nous profiterons de cet article pour evoquer les autres pseudo class autour de nth-child avec une petite parenthèse sur les selecteurs de combinaisons.

Exemple pour appliquer une couleur aux 3 premiers élements d'une liste.

Si vous ne voulez cibler que les trois premiers élèment, vous pouvez opter pour differentes syntaxes. Regardons comment nous pouvons ecrire nos sélecteur avec la pseudo class :nth-child(x) (sans le n de repetition) pour appliquer une régle {color:orange;}

Vous pouvez passez les point secondaires au sujet de 2 à 5 et y revenir plus tard.

1. avec trois sélecteurs pour sélectionner une position unique à la fois:
   li:nth-child(1) , li:nth-child(2), li:nth-child(3) {color:orange}
   il n'y aura que les élèments sur ces 3 positions qui seront ciblés.
2. Une Autre syntaxe pour que cette régle ait une priorité minimale par défaut : li:where(:nth-child(1) , :nth-child(2), :nth-child(3)) {color:orange}
3. Une autre syntaxe similaire mais augmentant sa priorité : li:is(:nth-child(1) , :nth-child(2), :nth-child(3)) {color:orange}
4. Une version de faible priorité excluant toutes les positions au delà de la 3^éme: li:where(:not(:nth-child(3) ~ li)) {color:orange}
5. Et la syntaxe excluante conservant sa priorité : li:not(:nth-child(3) ~ li) {color:orange}
6. Une syntaxe moins intuitive est aussi disponible :li:nth-child(-n + 3) {color:orange} selectionnera les 3 premieres occurances.

Testons ces syntaxes, certaines ne fonctionnent peut-être pas encore dans votre navigateur, pas de panique. La premiere , à prendre par défaut et prudence, est implementé dans nos navigateurs depuis de nombreuses années.

Pour connaitre l'état du support de ces syntaxes, vous pouvez consulter le site CanIuse.com . support de :nth-child(), puis support de :is(), support de :where() et support de :not().

Exemples à survolés montrant la priorité minimisé avec la pseudo class :where().

li:nth-child(1),
li:nth-child(2),
li:nth-child(3) {
   color: orange;
   }

li:where(:nth-child(1), :nth-child(2), :nth-child(3)) {
   color: tomato;
   }

li:is(:nth-child(1), :nth-child(2), :nth-child(3)) { 
   color: green;
   }

li:not(:nth-child(3) ~ li) {
   color: blue;
   }

li:not(:nth-child(3) ~ li) {
   color: purple;
   }
li:nth-child(-n + 3)  {
color:hotpink;
}
/* test specifité selecteurs */
ul:hover li {
   color: white;
   }

Ces six syntaxes s'appuyent sur :nth-child(). La premiere est celle à utiliser par prudence si vous n'avez aucune raison d'utiliser les autres. Elles sont globalement faciles à comprendre et à mettre en oeuvre, une liste n'est composé que de <li> , il n'y a aucune ambiguité, la troisieme <li> est en troisieme position. La derniere syntaxe, plus concise, est peut-être moins intuitive pour un débutant sans notions de programations.

Cependant, cette pseudo class se contente de relever la position des élèments présents. Le type de balises et leurs attributs n'ont aucune importance.

Si vous voulez appliquer un style sur tout les titres <h2> pairs ou tout les 3 paragraphes avec une class <p class="maclass"> ce ne sera pas possible. En faisant h2:nth-child(2n), p.maClass:nth-child(3n) , le selecteur regardera si le titre est sur une position paire dans l'architecture et pour le paragraphe il regardera si il se trouve sur l'intervalle 3n et si l'attribut class="maclass" est présent.

Les mots clés even et odd permettent de cibler respectivement les positions paires et impaires.
Pour tout les élement en position 2,4,6,8,... ce sera :nth-child(even)
et pour ceux en position 1,3,5,7,...ce sera :nth-child(odd).

Il est possible de décaller le numero de position à partir d'un motif. Par exemple, vous voulez selectionner tous les élèments en cinqieme place, mais à partir du 3eme (ex: 3,8,12,17,...). en partant de :nth-child(5n) il suffit de notifié se décallage en ajoutant ou retranchant la valeur permettant de retomber sur le numéro 3 ou 8 . :nth-child(5n - 2) ou :nth-child(5n + 3) cibleront les mêmes positions.

Voyons maintenant d'autre exemples pratiques avec des grilles pour éclaircir tout cela.

la puissance de :nth-child(xn) au profit des grilles flex ou grid

Un premier exemple en flex est déjà évoqué ici dans cet article(Flex, ajuster le nombre d'élements par lignes) , celui-ci est basé sur les selecteur :nth-child(5n) et :nth-child(5n - 1) pour cibler 2 élements sur des groupes de 5.

Reprise de l'exemple associé à cet article:

body {
  display:flex;
  flex-wrap:wrap;
  gap: 0.5em 1em;
}
div {
  min-width:26%;
  flex-grow:1;
}
div:nth-child(5n), 
div:nth-child(5n - 1) {
  min-width:40%
}

Pour reproduire cet exemple avec grid, les selecteurs seront les mêmes avec ses régles spécifiques.

body {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap: 0.5em 1em;
}
div {
  grid-column:auto / span 2;
}
div:nth-child(5n), 
div:nth-child(5n - 1) {
  grid-column:auto / span 3;
}

En Fin

1. la pseudo class: :nth-child(X) ne cible qu'une seule position, quelque soit la balise s'y trouvant.
2. les pseudo class: :nth-child(Xn) et :nth-last-child(Xn) cible toutes les positions a X intervalles, quelque soit la balise s'y trouvant.
3. les pseudo class: :nth-child(1) et :first-child cible la premiere position quelque soit la balise s'y trouvant.
4. les pseudo class: :nth-last-child(1) et:last-child cible la derniere position (qui peut aussi être la premiere si il n'y a qu'une seule balise)
5. Pour filtrer une balise seule dans son parent, nous pouvons donc accoler ces deux selecteurs: :first-child:last-child ou ces deux::nth-child(1):nth-last-child(1)
   mais il existe :only-child qui aura une priorité inférieur aux duos de selecteurs.
6. Pour ne filtrer et ne compter q'un seul type de balise dans l'un ou l'autre sens, ce sera les pseudos class :nth-of-type(), :nth-last-of-type()

Vous êtes maintenant et en principe paré pour filtrer et cibler vos balises selon leur position dans leur parent respectif, le choix des selecteurs et leur écriture peut avoir une incidences sur leur priorité.