Comment cibler uniquement les enfants immédiats avec les sélecteurs CSS : un guide complet

Comment cibler uniquement les enfants immédiats avec des sélecteurs CSS

Lorsque vous travaillez avec des éléments imbriqués, il peut être difficile de styliser uniquement les enfants immédiats et exclure tous les descendants. Les sélecteurs CSS traditionnels comme ul > li et #parent > li inclura tous les éléments enfants, quel que soit leur niveau d'imbrication.

Sélecteur d'enfant immédiat en CSS

Le sélecteur d'enfant immédiat > peut être utilisé pour cibler uniquement les enfants de premier niveau d’un élément parent. Par exemple, pour cibler uniquement les éléments de liste de niveau supérieur dans votre liste triable imbriquée, vous pouvez utiliser le sélecteur suivant :

#parent > li

Remarque : Ce sélecteur n'est pas pris en charge dans IE6.

Solution de contournement pour IE6

Pour une compatibilité descendante avec IE6, vous pouvez utiliser le hack CSS suivant :

#parent li { /* your styles for immediate children */ }
#parent li li { /* reset styles for descendants */ }

Spécifique à MooTools Solution

Dans votre code basé sur MooTools, le problème se pose car getElements() récupère tous les descendants au lieu de uniquement les enfants immédiats. Pour résoudre ce problème, vous pouvez utiliser getChildren() à la place :

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
};

En utilisant getChildren(), vous pouvez vous assurer que le texte de position est mis à jour correctement uniquement pour les enfants immédiats de chaque liste imbriquée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!