nth-child(formule) nth-child formula

See the post in English here

Il peut arriver que l'on souhaite styliser un répéteur, que ce soit une simple liste ou l'affichage d'articles issus de wordpress. Cet exemple est appliqué sur Oxygen Builder, mais bien évidemment il marchera pour tous les constructeurs de page ou même pour un site codé à la main.

Les enfants d'une classe sont regroupés sous la dénomination nth-child si comptés depuis le début ou last-nth-child si comptés depuis la fin. On pourra utiliser ce code dans les deux cas.

nth-child s'utilise avec des parenthèses et avec soit un nombre, soit un mot-clé comme odd ou even pour pair et impair, ou encore avec une formule.

Le cas de la formule est intéressant quand on veut dépasser le stade du 1 sur 2 qui utilise par exemple odd et even.

et la suite se fait tout seul en fonction du nombre d'enfants...

Exemple avec une liste :

  • enfant 1
  • enfant 2
  • enfant 3
  • enfant 4 (3n-8)
  • enfant 5 (3n-7)
  • enfant 6 (3n+3)
  • enfant 7 (3n-8)
  • enfant 8 (3n-7)
  • enfant 9 (3n+3)
  • enfant 10 (3n-8)
  • enfant 11 (3n-7)
  • enfant12 (3n+3)
  • enfant 13 (3n-8)
  • enfant 14 (3n-7)
  • enfant15 (3n+3)
nth-child(formule) nth-child formula

Les formules de nth-child (ou last-nth-child si on part de la fin)

Ce qui se situe entre parenthèse est une simple opération mathématique, donc tout dépend du nombre d'enfants différents que l'on veut cibler.

Séries de trois nth-child :

CSS Série de Trois nth-child
/* Cible les 1er de chaque série de trois */ nth-child(1), nth-child(3n-8) {}
/* Cible les 2ème de chaque série de trois */ nth-child(2), nth-child(3n-7) {}
/* Cible les 3ème de chaque série de trois */ nth-child(3), nth-child(3n+3) {}

Séries de trois nth-child (suite)

Vous pouvez l'appliquer sur tous types de sélecteurs, ça peut être sur des li:nth-child( ), des sélecteurs plus compliqués ou plus complets comme #votre_id li:nth-child( ) ou .votre_classe:nth-child( )

À partir du moment ou votre série ne sera pas de trois, mais une série de deux, de quatre, de cinq, etc. les formules devront être adaptées.

Comme on l'a vu plus haut, pour une série de deux pas besoin de se compliquer la tâche, nth-child(odd) et nth-child(even) marchent très bien (on cible les pairs et impairs).

Et pour les autres séries (4,5,6...)

CSS Série de Quatre nth-child
/* Cible les 1er de chaque série de quatre */ nth-child(1), nth-child(4n-8) {}
/* Cible les 2ème de chaque série de quatre */ nth-child(2), nth-child(5n-10) {}
/* Cible les 3ème de chaque série de quatre */ nth-child(3), nth-child(6n-12) {}
/* Cible les 4ème de chaque série de quatre */ nth-child(4), nth-child(7n-14) {}

Pour d'autres séries je vous conseille de faire ses simulations de série avec une feuille de tableur (excel, libre office, ...).

Cela vous permettra de valider avant de passer à l'applicatif.

last-nth-child()

Pour last-nth-child() le principe est le même en partant du dernier élément et en comptant à rebours.

Si tout ne vous parait pas encore clair

Vous pourrez trouver un complément d'information en Anglais seulement, ici :

CSS-Tricks | Sitepoint | :nth tester

Fin de la partie FR du post nth-child(formule) nth-child formula


nth-child(formula) lists and examples

Sometimes you may want to style a repeater, whether it's a simple list or displaying articles from wordpress. This example is applied on Oxygen Builder, but obviously it will work for all page builders or even for a hand-coded site.

The children of a class are grouped under the name nth-child if counted from the beginning or last-nth-child if counted from the end. This code can be used in both cases.

nth-child is used with parenthesis and with either a number or a keyword like odd or even for even and odd, or with a formula.

The case of the formula is interesting when you want to go beyond the stage of 1 out of 2 which uses for example odd and even.

and the rest is done by itself according to the number of children…

Example with a list:

  • child 1
  • child 2
  • child 3
  • child 4 (3n-8)
  • child 5 (3n-7)
  • child 6 (3n+3)
  • child 7 (3n-8)
  • child 8 (3n-7)
  • child 9 (3n+3)
  • child 10 (3n-8)
  • child 11 (3n-7)
  • child12 (3n+3)
  • child 13 (3n-8)
  • child 14 (3n-7)
  • child15 (3n+3)

The nth-child formulas (or last-nth-child if we start from the end)

What is in parenthesis is a simple mathematical operation, so it depends on the number of different children you want to target.

Series of three nth-child :

CSS Series of Three nth-child
/* Targets the 1st of each set of three */ nth-child(1), nth-child(3n-8) {}
/* Targets the 2nd of each set of three */ nth-child(2), nth-child(3n-7) {}
/* Targets the 3rd of each set of three */ nth-child(3), nth-child(3n+3) {}

Series of three nth-child (continued)

You can apply it on all kind of selectors, it can be on li:nth-child( ), more complicated or more complete selectors like #your_id li:nth-child( ) or .your_class:nth-child( )

As soon as your series will not be of three, but a series of two, four, five, etc. the formulas will have to be adapted.

As we have seen above, for a series of two, there is no need to complicate the task, nth-child(odd) and nth-child(even) work very well (we target the odd and even ones).

And for the other series (4,5,6…)

CSS Series of Three nth-child
/* Targets the 1st of each set of four */ nth-child(1), nth-child(4n-8) {}
/* Targets the 2nd of each set of four */ nth-child(2), nth-child(5n-10) {}
/* Targets the 3rd of each set of four */ nth-child(3), nth-child(6n-12) {}
/* Targets the 4th of each set of four */ nth-child(4), nth-child(7n-14) {}

For other series I advise you to do your series simulations with a spreadsheet (excel, free office, …).

This will allow you to validate before going to the application.

last-nth-child()

For last-nth-child() the principle is the same starting from the last element and counting backwards.

If you need more help

CSS-Tricks | Sitepoint | :nth tester

End of EN version of the nth-child(formule) nth-child formula post

News

Articles par catégorie

Contactez-nous, tout simplement.

:)

Vous pouvez m'appeler
au 06 60 14 57 10,
ou encore me laisser un mail sur
contact [at] one-day.fr.

À la recherche d'un développeur Shopify ? vous êtes à la bonne adresse !
N'hésitez pas à voir mon profil sur Codeur.com

06 60 14 57 10
select linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram