CSS Selector meaning "...except for descendants of..."

Question

Hi have a DOM like this and need to select all a-elements except for those that are descendants of the div.hidden section.

<body>
<div>
    Some text <a href="mailto:alex@domain.com">Email Alex</a> Some more text
    <br/>
    <span>
        Some text <a href="mailto:frank@domain.com">Email Frank</a> Some more text
    </span>
    <hr/>
    <div class="hidden">
        Some text <a href="mailto:rachel@domain.com">Email Rachel</a> Some more text
        <div>
            Some text <a href="mailto:doris@domain.com">Email Doris</a> Some more text
            <p>
                Some text <a href="mailto:molly@domain.com">Email Molly</a> Some more text
            </p>
        </div>
    </div>
    <hr/>
    <div>
        Some text <a href="mailto:paul@domain.com">Email Paul</a> Some more text
    </div>
</div>
</body>

So all the a-elements within the horizontal lines would be excluded. How can I do that? Using jQuery is not an option unfortunately.

Thanks Alex

Possible duplicate: http://stackoverflow.com/questions/10227375/css-not-selectors-and-selecting-descendants — showdev, Sep 06 '13 at 19:23

score 3 · Answer 1 · answered Sep 06 '13 at 19:26

3

One way to do that is to make a rule for all <a> elements and then override with one that reverses the rule for the ones that are in the div.hidden, i.e.

a {
    prop: special-value;
}
div.hidden a {
    prop: not-special-value;
}

answered Sep 06 '13 at 19:26

fred02138

3,323
1
14
17

That works. Except I actually need this in JavaScript using document.querySelectorAll() – Alexander Sascha Kerschhofer Sep 06 '13 at 20:38

CSS Selector meaning "...except for descendants of..."

1 Answers1