How to prevent CSS inheritance where child selectors fail?

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 e.g.

<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;
}

i.e. 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.

@ralph.m In Google Chrome (at least) the UL is indeed inheriting the text-indent (according to the inspector) although what you say about the default padding is worth having a look at. I'd prefer to not need to set any specific styles on the children of dd.whatever though. The aim is to target only those elements, and disallow the or any inheritance. — Fred Gandt, Aug 02 '14 at 08:18

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

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.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 02 '14 at 08:21

Horen

11,184
11
71
113

Because the `text-indent` is not specified by the browser (user agent) defaults for the naughty child, it is let through? This will be the case for any _unusual_ rules? Grumble grumble... – Fred Gandt Aug 02 '14 at 08:35
Well that's frustrating. Thanks though. At least that's solved. One learns something new every day :-) I will accept this as the answer if nothing _overwrites_ it in the next few days. I'd also like to hear other _suggestions_, and if it shows as "answered" they might be less forthcoming. I hope you understand Horen. Thanks for your speedy response. – Fred Gandt Aug 02 '14 at 08:50

How to prevent CSS inheritance where child selectors fail?

1 Answers1