Aller au contenu principal

IE8 et :last-child : une alternative

Publié le 19 mai 2009

L'autre jour je mettais en ligne un site qui fut mon premier à avoir nécessité des ajustements pour Internet Explorer 8. En effet Microsoft a mis le paquet sur le respect des standards, mais peut-être un peu trop. Je m'explique : la pseudo-classe ":last-child" (dernier enfant d'un élément parent) n'est pas reconnue par IE8, et bien qu'extrèmement pratique, elle n'est pas valide d'après les spécifications CSS 2.0 du W3C. Je l'utilisais souvent et peut-être à tort, vu que la plupart des navigateurs la supportent.

Mon objectif : insérer le caractère " | " (pipe) entre chaque item d'une liste, sauf le dernier. Tout cela en CSS.

Avant

li {

list-style-type: none;

display: inline;

float: left;

}

li:after {

content: ' | ';

}

li:last-child:after {

content: '';

}

Sous IE8, donne :

item | item | item |

Nous avons un " | " de trop à la fin, il faut trouver une autre manière d'écrire notre déclaration CSS :

Après

En utilisant le sélecteur d'enfant adjacent "li + li".

li {

list-style-type: none;

display: inline;

float: left;

}

li + li:before {

content: ' | ';

}

Qui sous Internet Explorer 8, donne :

item | item | item

› Notre liste est désormais correctement stylée sous tous les navigateurs modernes. Merci IE8 de m'avoir remis sur le droit chemin du codage CSS, je n'utiliserai plus :last-child.