リミット最も近い親にCSSセレクタ

Question

私はこのDOM構造を持っている場合は

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

私は

.abの.c {...}

のようなセレクタを作成したいと"a"要素c2が "b"も含まれていないので、id = c1にのみ適用され、id = c2には適用されません。

しかし、現在のところ、c2は "a"と "b"を持つはるか上位の親の内側にあるため、セレクタが適用されます。

"a"と "c"の間のチェーンには、より多くの親が存在する可能性があることに注意してください。 私はJavascript/jqueryでこれを行うことができましたが、私は純粋なCSSソリューションを望みます。

Answer 1

子コンビネータセレクタ>を使用して、特定の親要素を持つ子要素を対象にすることができます。#c1の対象となる下のデモを参照してください。&疑似要素。

セレクタ（擬似方法は#c1にのみ適用されます）を参照できますが、親スタイルは継承されます。だからあなたはスタイルをリセットする必要があります。 （以下デモでcolor: initial）

.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>