Utiliser CSS3 c’est bien, mais pas suffisant. Il ne s’agit pas d’un nouveau langage de style, mais bien d’ajouts à CSS2.1. Il serait donc prématuré de vouloir se jeter sur CSS3 sans maitriser son petit frère.

Cette phrase sonne comme du déjà vu, déjà entendu, ce n’est pas la première fois que je le dis, et elle fait également écho à l’article sur le «mirage CSS3» de Raphaël Goetter.

Je ne vais pas m’étaler davantage sur cet aspect de ce 3ème volet de la passionnante saga CSS, ce n’est pas l’objet de ce billet.

Ce qu’on cherche à faire

nth-child() permet de cibler précisément un élément s’il respecte la condition entre parenthèses.
On part du principe qu’on travaille sur une liste.

Exemples :

li:nth-child(n+3) { }

permet de cibler tous les li à partir du troisième.

li:nth-child(3) { }

permet de ne cibler que le 3ème li.

Démonstration

Il est possible de reproduire ces deux sélecteurs CSS3 avec les sélecteurs CSS2.1 (compatible IE7+)

Cibler tous les éléments sauf les N premiers en CSS2

Si vous lisez régulièrement les actualités d’Alsacreations.com, vous avez probablement croisé mon article sur la sélection avancée des frères d’un élément. Cet article fait référence – entre autres choses – au sélecteur d’adjacence direct représenté par un « + ».

Ce code permet de sélectionner tous les li frères directs d’un autre li. C’est à dire tous les li sauf le premier, puisqu’il n’a pas de frère avant lui.

li + li { }

De la même manière, ce code permet de cibler tous les li sauf les deux premiers :

li + li + li { }

Ainsi de suite. On a ici reproduit notre sélecteur CSS3 li:nth-child(n+3).

Cibler le Nième élément en CSS2

Cette fois nous allons avoir besoin de la pseudo-classe first-child qui permet de cibler le premier enfant d’un élément.
C’est pratique, car on sait déjà comment cibler le premier élément :

li:first-child { }

Pour cibler le second, il faut combiner le sélecteur précédent au sélecteur d’adjacence directe pour obtenir un sélecteur qui dit « l’élément directement frère du premier » :

li:first-child + li { }

Cela permet ici de cibler le deuxième élément.

On peut également dire « l’élément directement frère de l’élément directement frère du premier »

li:first-child + li + li { }

Là on cible le troisième élément… bon, vous avez compris le truc j’imagine ?

Démonstration

N’hésitez pas si vous avez des suggestions d’amélioration, ou des remarques sur cet article.

Ce sujet fait relai à celui de Raphaël Goetter dans son article Cibler le Nieme élément en CSS2. Il est simplement abordé à ma sauce.