如何防止子选择器失败的CSS继承？

Question

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.

Considering eg

<div class="magic">
    <dl>
        <dt>Foo</dt>
        <dd class="whatever">Bar
            <ul>
                <li>Baz</li>
            </ul>
        </dd>
    </dl>
</div>

Where the CSS is

div.magic dd.whatever {
    text-indent: -2em;
}

I find that text-indent is inherited by the <ul> causing display issues . So I change my CSS to

div.magic dl > dd.whatever { ...

and the inheritance continues unabated >.<

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 <dd> s of <dl> s within <div class="magic"> will have the text-indent applied, it doesn't explicitly stop the inheritance by other element types .

Am I simply dumb or is this impossible to fix without explicit specification that

div.magic dl > dd.whatever * {
    text-indent: 0;
}

ie Is the only fix to undo whatever inherited applications are undesired?

Any and all assistance will be greatly appreciated; however, the example of a <ul> inside a <dd> 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 :-)

EDIT: JSFIDDLE of the above example. Open your inspector to see what's inherited by what.

EDIT 2: 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.

Here's hoping CSS4 or CSS5 will provide a few more options.

Answer 1

Yes, that is the concept of Cascading Style Sheets. Child nodes inherit styles from their parents unless they are overwritten by a more specific rule. These rules can either be defined by you or the browser's default style sheet.

Take this example: http://jsfiddle.net/r7R8z/

div.magic dl > dd.whatever {
    padding-left: 20px;
    font-size: 20px;
}

Baz will be in font-size: 20px but will have a padding-left: 0 since the padding is overwritten by the browser but the font-size isn't.

To answer your question: Yes, you will have to overwrite the text-indent property for all elements that don't have it defined by the Browser by default. Check out this answer for more info.