Select all siblings if one of them has a specific class

Question

RE: above regarding duplicate - my question asks if there was a way to select ALL elements inside of a child where one class exists in pure CSS whereas that linked question is just asking if there is an opposite of the + selector which is not what I was asking/looking for. This should be untagged as duplicate.

Main Question:

I want to select all elements inside a parent if one of the siblings has a specific class. How do I do this? I tried:

https://www.w3schools.com/cssref/sel_gen_sibling.asp

The element1~element2 selector matches occurrences of element2 that are preceded by element1.

But it's not what I want.

CSS sibling selectors (select all siblings)

My question is not a duplicate as the class is in the first element in above question comes first which makes it work.

See below:

.red ~ .item {
  background-color: red;
}

<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>

<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>

How do you select all siblings if one of them has a class in pure CSS? Or do I need to use JS?

You'd *have* to use JavaScript for this since CSS has no previous sibling selector. — j08691, Dec 10 '18 at 21:19
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — wlh, Dec 10 '18 at 21:30
why did this get marked duplicate and downvoted? I was asking if there was a way to select ALL elements where one class exists in a child and that question just asks if there is a previous selector. Is there a way to dispute this? — kawnah, Dec 11 '18 at 14:16

score 1 · Answer 1 · answered Dec 10 '18 at 21:29

For this particular case and if you want to apply background to all your elements, you can consider a pseudo element that will cover all of them as your background layer:

ul {
  position: relative;
  z-index: 0;
}

.red:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 40px;
  right: 0;
  bottom: 0;
  background-color: red;
}

<ul>
  <li class="item red">list item</li>
  <li class="item">list item</li>
  <li class="item">list item</li>
  <li class="item">list item</li>
</ul>

<ul>
  <li class="item">list item</li>
  <li class="item">list item</li>
  <li class="item red">list item</li>
  <li class="item">list item</li>
</ul>

score 1 · Accepted Answer · answered Dec 10 '18 at 21:34

Use jQuery to get the siblings and then apply the red class to them.

$( "li.item.red" ).siblings().addClass("red");

.red {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>

<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>

Select all siblings if one of them has a specific class

2 Answers2