CODEWITHSUNDEEP
csscss-selectors
user319862
user319862

Reputation: 1857

How can I select an element that is not the child of a specific parent based on the parents class?

For example, I would like to select the two divs with data-role of content that are not children of a data-role="page" div with class "modal". I am not well versed in advanced CSS selectors.

<div>
    <div data-role="page">
        <div data-role="content"></div>
    </div>
    <div data-role="page" class="modal">
        <div data-role="content"></div>
    </div>
    <div data-role="page">
        <div data-role="content"></div>
    </div>
</div>

I've tried a few things but I can't get anything to work... e.g.

[data-role="content"]:not([data-role="page"].modal > :after)

or 

[data-role="content"]:not([data-role="page"].modal > [data-role="content"])

Upvotes: 0

Views: 198

Answers (2)

Pang
Pang

Reputation: 10127

[data-role="page"]:not(.modal) > [data-role="content"]

This gets all the elements whose data-role is page and who does not has the class modal, then get all their immediate children whose data-role is content.

Live demo here.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324810

Well, you could do it with:

:not([data-role=page])>[data-role=content] {...}

But for better compatbility you might want to see if you can do:

[data-role=content] {/* define some styles */}
[data-role=page]>[data-role=content] {/* cancel out the previously-defined styles */}

Upvotes: 1

Related Questions