PRATIQUE CLIENTS WEB 
Un équivalent compatible IE du sélecteur d'enfant en CSS
 
"Internet Explorer ne reconnaît pas le sélecteur d'enfant. Comment puis-je éviter de cibler les sous-éléments d'un élément quand je vise ce dernier ?" (04/07/2005)
  Forum

Réagissez dans les forums de JDN Développeurs

L'âge avancé du navigateur de Microsoft oblige les développeurs Web à redoubler d'attention quand il s'agit d'utiliser des techniques pourtant standards et largement reconnues chez les autres navigateurs. Le sélecteur d'enfant ">" est de ces règles CSS qu'Explorer ignore. Elle permet d'appliquer un style sur les enfants d'un élément.

#contenu > p { ... }

Une manière de le remplacer est d'utiliser le sélecteur universel * : le style s'appliquera à tous les enfants d'un éléments :

#contenu * { ... }

Un problème survient quand on veut que cette règle ne s'applique pas aux enfants de ces sous-éléments. Le sélecteur universel pendant en compte tous les éléments contenu dans un élément, ainsi que leur descendant, un style peut facilement s'appliquer à des éléments qui ne sont pas censés l'utiliser.

La solution consiste à double le sélecteur universel : une première règle applique le style à tous les sous-éléments de l'élément de base, tandis que la règle suivante "annule" cette règle pour les sous-éléments de ces sous-éléments :

#contenu * { background:black }
#contenu * * { background:white }


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius

 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page