IE8 et :last-child : une alternative

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.