title: How to modify a class when a specific class exists on the same element?
body: <p>So I have my (simplified here) bootstrap navbar here.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav class="navbar"&gt;
      &lt;ul class="navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;foo&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.navbar-fixed-top {
    height: 100px;
  }
  .navbar-nav &gt;li &gt;a {
    line-height: 100px
  }
  </code></pre>
  
  <p>I just want to shrink the <code>navbar</code> when I add the class <code>.shrink</code> to <code>nav</code>. Pretty easy, just adding the following to my css:</p>
  
  <pre class="lang-js prettyprint-override"><code>.shrink {
      height: 80px;
  }
  </code></pre>
  
  <p>The problem is: the <code>line-height</code> of <code>.navbar &gt;li &gt;a</code> stays <code>100px</code> - is there a way I can affect this with css only?</p>