title: Style same class in another element with + selector differently
body: <p>There's a website that has code like I've put on the following jsfiddle:
  <a href="https://jsfiddle.net/roa8k7js/" rel="nofollow noreferrer">https://jsfiddle.net/roa8k7js/</a></p>
  
  <p>The site has very complex css styling, over 10,000 lines. In switching this site over to WordPress, the styling was all maintained and everything was put into a theme.</p>
  
  <p>As such, every <code>&lt;section&gt;</code> is now inside a wrapper. Because of this, the styling does not function correctly.</p>
  
  <p>The <code>&lt;section&gt;</code> padding is determined by a number of rules, including at least one major rule that uses the <code>+</code> selector.</p>
  
  <p>The rule looks like this:</p>
  
  <pre><code>#layout1 .option-b:not(.custom-bg-image) + .option-b:not(.custom-bg-img)
  {
    padding-top: 0;
  }
  </code></pre>
  
  <p>Since the wrapper was added, the <code>+</code> selector won't correctly identify the pattern:</p>
  
  <pre><code>&lt;div class="wrapper1"&gt;
    &lt;section class="option-b"&gt;This is some text&lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="wrapper1"&gt;
    &lt;section class="option-b"&gt;This is some more text - there shouldn't be any padding on top of this one&lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    border: 1px solid black;
  }
  
  #layout1 .container1&gt;section {
    padding-top: 2em;
    padding-bottom: 2em;
  }
  
  #layout1 .option-b:not(.custom-bg-image)+.option-b:not(.custom-bg-img) {
    padding-top: 0;
  }
  
  #layout1 .container1&gt;.wrapper1&gt;section {
    padding-top: 2em;
    padding-bottom: 2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="layout1"&gt;
    &lt;div class="container1"&gt;
      &lt;section class="option-b"&gt;This is some text&lt;/section&gt;
      &lt;section class="option-b"&gt;This is some more text - notice how there isn't a padding top on this one&lt;/section&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="layout1"&gt;
    &lt;div class="container1"&gt;
      &lt;div class="wrapper1"&gt;
        &lt;section class="option-b"&gt;This is some text&lt;/section&gt;
      &lt;/div&gt;
      &lt;div class="wrapper1"&gt;
        &lt;section class="option-b"&gt;This is some more text - there shouldn't be any padding on top of this one&lt;/section&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to determine if there is an easy way to adjust the CSS so that it can correctly identify a <code>&lt;section&gt;</code> in the next wrapper to set a value for <code>top-padding</code></p>
  
  <p>Also note, there is no way to remove the wrappers, and all the sections are already styled correctly, without them.</p>