title: CSS: Select element only if a later sibling exists
body: <p>In my HTML structure, I have it set up like this:</p>
  
  <pre><code>&lt;body&gt;
     &lt;main&gt;
        &lt;section&gt;
        ...
        &lt;/section&gt;
  
        &lt;aside&gt;
        ...
        &lt;/aside&gt;
     &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The problem is, not all pages have <code>&lt;aside&gt;</code></p>
  
  <p>I need to select <code>&lt;section&gt;</code> and give it a <code>max-width: 500px;</code> <strong>ONLY when <code>&lt;aside&gt;</code> is present</strong>. The default is <code>section { max-width: 1000px; }</code> (when <code>&lt;aside&gt;</code> is absent)</p>
  
  <p>Unlike in <a href="https://stackoverflow.com/questions/1132366/selector-for-one-tag-directly-followed-by-another-tag">Selector for one tag directly followed by another tag</a>; the user [asking the question] wants to style "B" ALL the time. Also, in this question, the user wants to select "B" (not "A")</p>
  
  <hr>
  
  <ul>
  <li>I need to style <code>&lt;section&gt;</code> ONLY if <code>&lt;aside&gt;</code> is present.</li>
  <li>I can't change the order of the HTML >_&lt;</li>
  <li><strong>Can it be done with CSS only?</strong></li>
  <li>What selector do I need or how to set it up?</li>
  <li>If it can't be done with CSS (I rather it be CSS-only), how can I accomplish this?</li>
  </ul>