Select all siblings if one of them has a specific class [duplicate] - html

Question

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
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?

Answer 1

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>

Answer 2

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>