title: Is there a selector (or any way around) for "Adjacent Until..." in CSS?
body: <p>I am trying to create a html layout that will be based of many adjacent sections. I want to have, somewhere between them, some <code>divs</code> that would control their appearance.</p>
  
  <p>My html would be something like this:</p>
  
  <pre><code>&lt;section class="section"&gt;White&lt;/section&gt;
  &lt;section class="section"&gt;White&lt;/section&gt;
  &lt;div class="color-scheme--violet-red"&gt;&lt;/div&gt;
  &lt;section class="section"&gt;Colored&lt;/section&gt;
  &lt;section class="section"&gt;Colored&lt;/section&gt;
  &lt;div class="color-scheme--clear"&gt;&lt;/div&gt;
  &lt;section class="section"&gt;White&lt;/section&gt;
  &lt;section class="section"&gt;White&lt;/section&gt;
  &lt;div class="color-scheme--violet-red"&gt;&lt;/div&gt;
  &lt;section class="section"&gt;Colored&lt;/section&gt;
  &lt;section class="section"&gt;Colored&lt;/section&gt;
  </code></pre>
  
  <p>And I would want that every <code>section</code> that came AFTER a <code>color-scheme</code> <code>div</code> had a background defined by it, as I was trying with this scss:</p>
  
  <pre><code>$white: #fefefe;
  $red: #c54839;
  $violet: #6c195e;
  
  .section {
      height: 15em;
      background: $white;
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $red;
  }
  
  
  .color-scheme--violet-red ~ .section {
      background-image: linear-gradient(to right, darken($violet, 10%) 0%, darken($red, 10%) 100%);
      color: $white;
  }
  
  .color-scheme--clear ~ .section {
      background: $white;
      color: $red;
  }
  </code></pre>
  
  <p>Here's a Fiddle with an working example: <a href="https://jsfiddle.net/raphaelaleixo/4featqrg/" rel="nofollow noreferrer">https://jsfiddle.net/raphaelaleixo/4featqrg/</a>
  (The last two sections are white, but they should be colored)</p>
  
  <p>The thing is, as the last sections are both adjacent to the <code>color-scheme--clear</code> <code>div</code> AND to the <code>color-scheme--violet-red</code>, the one that is below in the css file gains priority, and overwrite the other.</p>
  
  <p>My question is: <em>Is there anyway to - using only html/css - to select every element that is the CLOSEST adjacent to another?</em></p>
  
  <p>For this html, I can't nest this sections inside the "color controller" divs, neither I will be sure of how many divs will be until the next "controller" div (If this was know, I could nest multiple "next siblings" selectors and call it a day).</p>
  
  <p>I am <em>very</em> opened to any css hacks that could achieve this layout :-)</p>
  
  <p>Thanks!</p>