Cibler le Nième élément en CSS2

CSS3 apporte son lot de sélecteurs très évolués permettant de cibler des éléments tels que le Nième enfant, les éléments pairs ou impairs, le dernier, etc… Mais réservés aux navigateurs récents (exit donc IE6, IE7 et même IE8 en général).

Contrairement à ce que l’on croit, CSS2 n’est pas exempt de sélecteurs avancés très intéressants, et surtout compatibles depuis Internet Explorer 7.

Parmi ces éléments, le sélecteur d’adjacence directe, qui s’écrit avec un “+ » et qui cible un élément selon son frère précédent. Ainsi, h1 + p va cibler un paragraphe uniquement s’il est le frère qui suit un élément h1.

Tous sauf le premier

Le sélecteur d’adjacence prend tout son intérêt dans une suite d’éléments identiques, par exemple une liste. Dans ce cas de figure, la syntaxe “li + li » va cibler tous les éléments de liste sauf le premier (le seul qui n’a pas de li avant lui).

Tous sauf les N premiers

Par extension, il est tout à fait envisageable d’écrire li + li + li pour cibler les éléments qui ont au-moins 2 éléments de liste avant eux, donc tous sauf les deux premiers.

Cibler le Nième élément en CSS2

Un combinaison intéressante de sélecteurs, suggérée par l’un de mes stagiaires en formation, est très intéressante pour cibler n’importe quel élément dans une fratrie :

  • premier enfant (:first-child)
  • sélecteur d’adjacence directe (+)

En effet, la syntaxe li:first-child + li ne va cibler que le deuxième élément de liste. li:first-child + li + li sélectionnera uniquement le 3è élément, et ainsi de suite.

Le gros avantage est que cette syntaxe, composée de sélecteurs CSS2 fonctionnera parfaitement dès IE7 !