Limite d'un sélecteur CSS au parent le plus proche

Question

Si j'ai cette structure DOM

<div class="a b"> 
    <div class="c" id="c1"> 
    <div class="a"> 
     <div class="c" id="c2"> 
     </div> 
    </div> 
    </div> 
</div> 

Je voudrais créer un sélecteur comme

.ab .c {...}

Et ne l'applique qu'à id = c1 et non à id = c2 parce que l'élément "a" c2 est à l'intérieur de n'a pas aussi "b".

Mais actuellement c2 est aussi dans un parent beaucoup plus haut qui a "a" et "b" donc le sélecteur s'applique.

Notez qu'il pourrait y avoir plus de parents dans la chaîne entre "a" et "c". Je pourrais le faire en Javascript/jquery mais je voudrais une solution CSS pure.

Answer 1

Vous pouvez utiliser le sélecteur de combinateur enfant > pour cibler les éléments enfants avec un élément parent spécifique - voir une démo ci-dessous où l'#c1 est ciblé avec une couleur rouge & un élément pseudo.

Maintenant vous pouvez avoir le sélecteur (voir comment un pseudo s'applique uniquement à #c1), mais les styles parents seront hérités. Donc, vous devrez réinitialiser les styles. (color: initial dans la démo ci-dessous)

.a.b .c { 
 
    color: initial; 
 
} 
 
.a.b > .c { 
 
    color: red; 
 
} 
 
.a.b > .c:before { 
 
    content: '1. '; 
 
}

<div class="a b"> 
 
    <div class="c" id="c1">one 
 
    <div class="a"> 
 
     <div class="c" id="c2">two 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>