如果某個孩子至少存在一次，請選擇一些孩子

Question

我試圖只選擇具有類別c的div，至少有一個類別b的兄弟姐妹。下面是一些例子：

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

我嘗試以下規則：

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

它適用於情況1 - 3，但第四例與C級的第一個div沒有被選中。 AFAIK沒有其他選擇器可以幫助我，所以我在這裏嘗試我的運氣。

PS：class a的div可以有3個以上的孩子。這些僅僅是例子而不是實際的用例。

Answer 1

由於沒有以前的兄弟選擇器，所以無法匹配出現在兄弟元素之前的元素，也不能匹配包含其他子元素的父元素的子元素，因爲沒有父親選擇器。您將需要一些不基於選擇器的其他解決方法。

不要指望這在選擇器-4中是可行的，除非你使用JavaScript來匹配和應用工具類到那些.c元素 - 在這種情況下，你可以通過利用jQuery的長期實現:has()（我剛寫了一篇earlier today）：如果你想只使用CSS，你可以訪問服務器端代碼

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

Answer 2

，你可以只添加一個額外的class像.contains-b的父元素或data-attribute像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>