子供が少なくとも1回は存在する場合は子供を選択してください

Question

クラスcのdivを選択しようとしていますが、少なくともクラスbの兄弟が1人しかいません。ここでいくつかの例は、次のとおり

// Case1 
<div class="a"> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
</div> 

// Case2 
<div class="a"> 
    <div class="c"></div> 
    <div class="c"></div> 
    <div class="c"></div> 
</div> 

// Case3 
<div class="a"> 
    <div class="b"></div> 
    <div class="c"></div> //this one 
    <div class="b"></div> 
</div> 

// Case4 
<div class="a"> 
    <div class="c"></div> //this one 
    <div class="b"></div> 
    <div class="c"></div> //this one 
</div> 

Iは、以下のルールを試みた：これはケース1のために働く

.a > .b ~ .c { 
    background-color: red; 
} 

を - 3が、第四の実施例では、クラスCと最初のdivが選択されていません。 AFAIKは私を助ける他のセレクターがないので、私はここで私の運を試しています。

PS：クラスaのdivは3つ以上の子を持つことができます。これらは単なる例であり、実際のユースケースではありません。

Answer 1

兄弟要素の前にある要素と一致する兄弟要素がないため、親要素のセレクタがないため、他の子要素を含む親要素の子要素と一致することはできません。セレクタに基づいていない他の回避策が必要になります。

JavaScriptを使用して.cの要素にユーティリティクラスを適用して適用しない限り、これはセレクタ4では可能ではありません。この場合、今日のjQueryの長年の実装:has()（私はちょうど約earlier todayを書いた）：

$('.a:has(> .b) > .c') 

Answer 2

あなただけのCSSを使用したいとあなたは、サーバー側のコードへのアクセス権を持っている場合は、あなただけの親要素またはdata-attributeに.contains-bのような余分なclassを追加することができますdata-contains="b"のようにしてセレクタとして使用します。

.a[data-contains~=b] .c { 
 
    background-color: red; 
 
}

<div class="a" data-contains="b"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div> 
 

 
<div class="a" data-contains="c"> 
 
    <div class="c"></div> 
 
    <div class="c"></div> 
 
    <div class="c"></div> 
 
</div> 
 

 
<div class="a" data-contains="b c"> 
 
    <div class="b"></div> 
 
    <div class="c">this one</div> 
 
    <div class="b"></div> 
 
</div> 
 

 
<div class="a" data-contains="b c"> 
 
    <div class="c">this one</div> 
 
    <div class="b"></div> 
 
    <div class="c">this one</div> 
 
</div>