CODEWITHSUNDEEP
htmlcssinheritancecss-selectorshierarchy
Lazlo
Lazlo

Reputation: 8790

Stop CSS hierarchy

I have a hierarchy as follows:

<div class="outer">
    <h1>Heading</h1>
    <p>Paragraph</p>
    <p><a>Link</a></p>

    <div class="inner">
        <h1>Heading</h1>
        <p>Paragraph</p>
        <p><a>Link</a></p>
    </div>
</div>

I want the elements within the outer div to be styled in a certain way, and the elements within the inner div to be styled in another.

However, I don't want to have to pollute my rules for inner elements with resets for every property the outer rules defined.

In the following example, I want to avoid margin: 0px. Note that, of course, my stylesheet is much more complex and resets would be significantly more numerous and annoying.

outer a { margin: 5px; }
inner a { margin: 0px; color: orange; }

My initial reflex is to use the direct child selector >, but that becomes cumbersome for, say, links, strong, spans, etc.

The following example:

outer > a { color: orange; }

Would not style:

<div class="outer"><p><a>Link</a></p></div>
<div class="outer"><strong><a>Link</a></strong></div>
<div class="outer"><ul><li><a>Link</a></li></ul></div>
<div class="outer"><table><tr><td><a>Link</a></td></tr></table></div>
...

I need to find some other way of either

Is this possible? Note that rearranging my HTML structure is not possible in the present case.

Upvotes: 2

Views: 729

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99564

Is CSS3 selectors an option for you? if yes, may this trick helps:

CSS:

.outer>:not(div) a { color: orange; }

EDIT:

.outer > a, .outer > :not(.inner) a { color: orange; }

jsBin demo

Upvotes: 3

Ohad Milchgrub
Ohad Milchgrub

Reputation: 122

you can use the :not selector:

.outer > *:not(.inner) *

Upvotes: 1

Related Questions