title: Targeting Previous Sibling Element CSS
body: <p>I'm using off canvas menu that I've been trying to get work correctly. In order to get my fixed menu and off-canvas to play nicely, I had to take my header out of the off canvas inner wrapper, but now my header won't move over when the menu is opened. </p>
  
  <p>When off canvas is opened, it applies a .is-open-right to the inner wrapper which then has the CSS applied to it.</p>
  
  <p>I'm trying to add this line of CSS to my header ONLY when the .is-right-open class is added to my wrapper. </p>
  
  <pre><code>-webkit-transform: translateX(-450px);
      transform: translateX(-450px);
  </code></pre>
  
  <p>I was trying to target this way:</p>
  
  <pre><code>.is-open-right, .is-open-right &gt; .header  {
  -webkit-transform: translateX(-$offcanvas-size-large);
  transform: translateX(-$offcanvas-size-large);
  </code></pre>
  
  <p>}</p>
  
  <p>My HTML Looks like this when menu is closed:</p>
  
  <pre><code>&lt;div class="off-canvas-wrapper"&gt;
  &lt;header class="header scrolled" role="banner"&gt;&lt;/header&gt;
  &lt;div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML when Opened</p>
  
  <pre><code>&lt;div class="off-canvas-wrapper"&gt;
  &lt;header class="header scrolled" role="banner"&gt;&lt;/header&gt;
  &lt;div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Am I able to target my header element only when the next sibling element has the class .is-open-right ?? From what I've read... looks like I might have to go to a JS solution.</p>