{"id":2365,"date":"2012-04-10T07:58:31","date_gmt":"2012-04-10T05:58:31","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2365"},"modified":"2015-01-18T16:09:27","modified_gmt":"2015-01-18T15:09:27","slug":"nth-child-css2-compatible-ie7","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/nth-child-css2-compatible-ie7","title":{"rendered":"Un Nth-child en CSS 2 compatible depuis IE7"},"content":{"rendered":"

Utiliser CSS3 c’est bien, mais pas suffisant. Il ne s’agit pas d’un nouveau langage de style, mais bien d’ajouts \u00e0 CSS2.1. Il serait donc pr\u00e9matur\u00e9 de vouloir se jeter sur CSS3 sans maitriser son petit fr\u00e8re.<\/p>\n

Cette phrase sonne comme du d\u00e9j\u00e0 vu, d\u00e9j\u00e0 entendu, ce n’est pas la premi\u00e8re fois que je le dis, et elle fait \u00e9galement \u00e9cho \u00e0 l’article sur le «mirage CSS3»<\/a> de Rapha\u00ebl Goetter.<\/p>\n

Je ne vais pas m’\u00e9taler davantage sur cet aspect de ce 3\u00e8me volet de la passionnante saga CSS, ce n’est pas l’objet de ce billet.<\/p>\n

Ce qu’on cherche \u00e0 faire<\/h2>\n

nth-child()<\/code> permet de cibler pr\u00e9cis\u00e9ment un \u00e9l\u00e9ment s’il respecte la condition entre parenth\u00e8ses.
\nOn part du principe qu’on travaille sur une liste.<\/p>\n

Exemples :<\/p>\n

li:nth-child(n+3) { }<\/code><\/pre>\n
permet de cibler tous les li<\/code> \u00e0 partir du troisi\u00e8me.<\/p>\n
li:nth-child(3) { }<\/code><\/pre>\n
permet de ne cibler que le 3\u00e8me li<\/code>.<\/p>\n
D\u00e9monstration<\/a><\/p>\n
Il est possible de reproduire ces deux s\u00e9lecteurs CSS3 avec les s\u00e9lecteurs CSS2.1 (compatible IE7+)<\/p>\n
Cibler tous les \u00e9l\u00e9ments sauf les N premiers en CSS2<\/h2>\n
\"\"<\/p>\n
Si vous lisez r\u00e9guli\u00e8rement les actualit\u00e9s d’Alsacreations.com, vous avez probablement crois\u00e9 mon article sur la s\u00e9lection avanc\u00e9e des fr\u00e8res d’un \u00e9l\u00e9ment<\/a>. Cet article fait r\u00e9f\u00e9rence – entre autres choses – au s\u00e9lecteur d’adjacence direct repr\u00e9sent\u00e9 par un \u00ab\u00a0+\u00a0\u00bb.<\/p>\n
Ce code permet de s\u00e9lectionner tous les li<\/code> fr\u00e8res directs d’un autre li<\/code>. C’est \u00e0 dire tous les li<\/code> sauf le premier, puisqu’il n’a pas de fr\u00e8re avant lui.<\/p>\n
li + li { }<\/code><\/pre>\n
De la m\u00eame mani\u00e8re, ce code permet de cibler tous les li<\/code> sauf les deux premiers :<\/p>\n
li + li + li { }<\/code><\/pre>\n
Ainsi de suite. On a ici reproduit notre s\u00e9lecteur CSS3 li:nth-child(n+3)<\/code>.<\/p>\n
Cibler le Ni\u00e8me \u00e9l\u00e9ment en CSS2<\/h2>\n
\"\"<\/p>\n
Cette fois nous allons avoir besoin de la pseudo-classe first-child<\/code> qui permet de cibler le premier enfant d’un \u00e9l\u00e9ment.
\nC’est pratique, car on sait d\u00e9j\u00e0 comment cibler le premier<\/strong> \u00e9l\u00e9ment :<\/p>\n
li:first-child { }<\/code><\/pre>\n
Pour cibler le second<\/strong>, il faut combiner le s\u00e9lecteur pr\u00e9c\u00e9dent au s\u00e9lecteur d’adjacence directe pour obtenir un s\u00e9lecteur qui dit \u00ab\u00a0l’\u00e9l\u00e9ment directement fr\u00e8re du premier\u00a0\u00bb :<\/p>\n
li:first-child + li { }<\/code><\/pre>\n
Cela permet ici de cibler le deuxi\u00e8me \u00e9l\u00e9ment.<\/p>\n
On peut \u00e9galement dire \u00ab\u00a0l’\u00e9l\u00e9ment directement fr\u00e8re de l’\u00e9l\u00e9ment directement fr\u00e8re du premier\u00a0\u00bb<\/p>\n
li:first-child + li + li { }<\/code><\/pre>\n
L\u00e0 on cible le troisi\u00e8me \u00e9l\u00e9ment<\/strong>… bon, vous avez compris le truc j’imagine ?<\/p>\n
D\u00e9monstration<\/a><\/p>\n
N’h\u00e9sitez pas si vous avez des suggestions d’am\u00e9lioration, ou des remarques sur cet article.<\/p>\n
Ce sujet fait relai \u00e0 celui de Rapha\u00ebl Goetter dans son article Cibler le Nieme \u00e9l\u00e9ment en CSS2<\/a>. Il est simplement abord\u00e9 \u00e0 ma sauce.<\/p>\n
\n
Sources et liens utiles<\/h2>\n