:first-child, :last-child sur Internet Explorer 6

Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂

Qui n’a jamais rêvé de pouvoir utiliser les pseudo-classes CSS :first-child et :last-child sur le navigateur moribond Internet Explorer 6 ( B*rdel d’IE6 à la c*n pour les intimes ) ?

Voici une petite fonction javascript pour corriger le comportement d’IE6. Elle ne s’executera pas si l’utilisateur n’a pas de Javascript, mais rentrera parfaitement dans un processus de graceful degradation. Ses performances seront bien plus intéressantes qu’un IE7 JS uniquement pour cette propriété.

Tout d’abord, glissez cette fonction javascript dans un fichier externe, type messcripts.js :

function fix_firstlastchild(){
// Detection d'IE6, inutile si commentaires conditionnels
    if(navigator.userAgent.toLowerCase().indexOf('msie 6') != -1){
        var tags = document.getElementsByTagName("*");
        var nTags = tags.length;
        for (var i=0;i

Ensuite, assurez vous d'executer cette fonction après le chargement des éléments de la page.
Donc juste avant la fermeture du </body>, ou dans un éventuel appel domready :


Dans votre CSS, un petit aménagement s'imposera également, le script créant des classes CSS lastChild et firstChild :

ul li:last-child, ul li.lastChild {}
ul li:first-child, ul li.firstChild {}

D'après un script trouvé sur The Bright Lines, légèrement modifié par mes soins.
Donc sous licence WTFPL, mais un backlink est toujours le bienvenu : )

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Excellent cette combine.

    Et dire que je me prenais la tête depuis ce matin pour réussir à corriger ce bug sous IE6 en ajoutant des classes spécifiques…

    Merci pour le partage.