title: Select all siblings if one of them has a specific class
body: <p><strong>RE: above regarding duplicate</strong> - 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 <code>+</code> selector which is not what I was asking/looking for. This should be untagged as duplicate.</p>
  
  <p><strong>Main Question:</strong></p>
  
  <p>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:</p>
  
  <p><a href="https://www.w3schools.com/cssref/sel_gen_sibling.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/sel_gen_sibling.asp</a></p>
  
  <blockquote>
    <p>The element1~element2 selector matches occurrences of element2 that
    are preceded by element1.</p>
  </blockquote>
  
  <p>But it's not what I want. </p>
  
  <p><a href="https://stackoverflow.com/questions/11813465/css-sibling-selectors-select-all-siblings">CSS sibling selectors (select all siblings)</a></p>
  
  <p>My question is not a duplicate as the class is in the first element in above question comes first which makes it work.</p>
  
  <p>See below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red ~ .item {
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li class="item red"&gt;list item&lt;/li&gt;
  &lt;li class="item"&gt;list item&lt;/li&gt;
  &lt;li class="item"&gt;list item&lt;/li&gt;
  &lt;li class="item"&gt;list item&lt;/li&gt;
  &lt;ul&gt;
  
  &lt;ul&gt;
  &lt;li class="item"&gt;list item&lt;/li&gt;
  &lt;li class="item"&gt;list item&lt;/li&gt;
  &lt;li class="item red"&gt;list item&lt;/li&gt;
  &lt;li class="item"&gt;list item&lt;/li&gt;
  &lt;ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do you select all siblings if one of them has a class in pure CSS? Or do I need to use JS? </p>