Infos

Sélecteurs d'enfants et Internet Explorer

Comment palier au non-support par Internet Explorer des sélecteurs d'enfants CSS ?

Comme vous le savez probablement déjà, Internet Explorer n'est pas ce qui se fait de mieux en ce qui concerne l'implantation des standards (y compris et surtout CSS). Le navigateur de Microsoft occupant une part de marché considérable, il est malheureusement impossible de l'oublier.

Qu'est-ce qu'un sélecteur d'enfant ?

Commençons par rappeler comment se présente un simple sélecteur :

div{border: 1px solid red;}

Cette ligne affecte à tous les éléments div une bordure rouge d'un pixel.
Utilisons maintenant un sélecteur d'enfant :

body > div{border: 1px solid red;}

Ceci affecte une bordure rouge uniquement aux div descendant directement de l'élément body. Pour que ce soit clair, voici un petit bout de code HTML :

<body>
<div>
<div>Menu</div>
<div>Text</div>
</div>
</body>

Dans cet exemple, uniquement le div ouvert à la deuxième ligne et fermé à la cinquième aura une bordure rouge, les deux autres (contenant "Menu" et "Text") n'en auront pas.

Problème et solution

Ceci ne fonctionne tout simplement pas avec Internet Explorer ! Voici une solution toute simple permettant d'arriver au même résultat :

body div{border: 1px solid red;}
body div div{border: 0;}

Explications : à la première ligne, on affecte une bordure à tous les div contenus dans l'élément body. Et à la seconde, on annule cette bordure pour les div contenus dans un autre div (pour l'annuler on affecte tout simplement 0 à la bordure).
Voilà, c'est tout simple ! Ça peut cependant devenir fastidieux si le nombre de propriétés à annuler est important, mais c'est le seul moyen pour rester compatible avec Internet Explorer.

Je n'ai par contre pas trouvé de solution pour les sélecteurs d'enfants adjacents, qui permettent d'attribuer un style à un élément en fonction de l'élément qui le précède.

0.027' | CSS | XHTML 1.0 Strict
© 7px.net | Choisir un style : archycal | classic | cleersea