nth-child(formule) nth-child formula

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)

Séries de trois nth-child :

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).

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.

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)

Series of three nth-child :

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).

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.