Geek Answers Handbook

Select some children if a certain child exists at least once.

I am trying to select only divs with class c that have at least one sibling with class b. Here are some examples:

// 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 tried the following rule:

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

It works for case 1 - 3, but in the fourth example, the first div with class c is not selected. AFAIK there is no other selector that would help me, so I try here.

PS: a div with class a can have more than 3 children. These are just examples, not actual use cases.

+4
source share
2 answers

, sibling, sibling, , - , . , .

, -4, JavaScript .c - , jQuery :has() ( ):

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

CSS , 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>
Hide result
0

More articles:


All Articles