title: How to set CSS of one element depending on another element having a specific class?
body: <p>I have a sidebar menu on my website that opens and closes. </p>
  
  <p>When the sidebar is open I add an additional class called 'active' to the menu button which triggers the menu. </p>
  
  <p>When this menu button element has the class 'active' &amp; screen width is > 768px, I want to set the padding on the element with class 'container-fluid'.</p>
  
  <p>I currently do this with coffeescript/javascript:</p>
  
  <pre><code>@setPaddingIfMenuOpen = () -&gt;
    console.log 'set padding if menu open called from layout coffee'
    if $(window).width() &gt; 768
      if $('.show-left').hasClass 'active' 
        padding = 280
        $('#main &gt; .container-fluid').css 'padding-left', padding
      else 
        $('#main &gt; .container-fluid').css 'padding-left', '25px'
    else 
      $('#main &gt; .container-fluid').css 'padding-left', '25px'
  </code></pre>
  
  <p>But I was wondering if I could achieve the same thing with pure CSS?</p>
  
  <p>Here is a JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/685Vv/5/" rel="nofollow">http://jsfiddle.net/685Vv/5/</a></p>
  
  <p>Once you click the open menu button and the element #showLeft also has class 'active, see if you can get the attribute 'padding-left: 100px' added to the element with class 'main'. And then if the attribute #showLeft does not have the class 'active' then the attribute padding-left should be changed to 'padding-left: 0px'</p>