title: How to prevent CSS inheritance where child selectors fail?
body: <p>I've read many other questions similar to this, but have found nothing covering what seems to be a peculiar issue; albeit one I can't help thinking more than just I am subject to.</p>
  
  <p>Considering <em>e.g.</em></p>
  
  <pre><code>&lt;div class="magic"&gt;
      &lt;dl&gt;
          &lt;dt&gt;Foo&lt;/dt&gt;
          &lt;dd class="whatever"&gt;Bar
              &lt;ul&gt;
                  &lt;li&gt;Baz&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/dd&gt;
      &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the CSS is</p>
  
  <pre><code>div.magic dd.whatever {
      text-indent: -2em;
  }
  </code></pre>
  
  <p>I find that <code>text-indent</code> is inherited by the <code>&lt;ul&gt;</code> causing <em>display issues</em>. So I change my CSS to</p>
  
  <pre><code>div.magic dl &gt; dd.whatever { ...
  </code></pre>
  
  <p>and the inheritance continues unabated >.&lt;</p>
  
  <p>From what I can work out by reading the specs, the issue is that although the CSS selector does indeed specify that only the immediate child <code>&lt;dd&gt;</code>s of <code>&lt;dl&gt;</code>s within <code>&lt;div class="magic"&gt;</code> will have the <code>text-indent</code> applied, it doesn't explicitly stop the inheritance by <strong>other element types</strong>.</p>
  
  <p>Am I simply dumb or is this impossible to fix without explicit specification that</p>
  
  <pre><code>div.magic dl &gt; dd.whatever * {
      text-indent: 0;
  }
  </code></pre>
  
  <p><em>i.e.</em> Is the only fix to undo whatever inherited applications are undesired?</p>
  
  <p>Any and all assistance will be greatly appreciated; however, the example of a <code>&lt;ul&gt;</code> inside a <code>&lt;dd&gt;</code> isn't something I'd necessarily choose to do, but it is something that's cropped up in practice - I'm just trying to fix it (for someone else). So I humbly request a lack of responses suggesting that I rewrite the HTML. Cheers :-)</p>
  
  <p><strong>EDIT:</strong> <a href="http://jsfiddle.net/FredGandt/M96K5/" rel="nofollow">JSFIDDLE</a> of the above example. Open <em>your</em> inspector to see what's inherited by what.</p>
  
  <p><strong>EDIT 2:</strong> Although this was answered very quickly and I accept the answer, I'd be interested to hear what pure CSS tricks and kludges people might suggest to workaround the apparent inability to limit selection to only and strictly the targeted element, and not it's descendants no matter what they may be.</p>
  
  <p>Here's hoping CSS4 or CSS5 will provide a few more options.</p>