CODEWITHSUNDEEP
csscss-selectors
Conic
Conic

Reputation: 375

Element that is not inside of other element

If you have this HTML

<div>
    <span class="style-me">i want to be styled</span>
</div>
<div class="ignore-my-descendants">
    <span class="style-me">i want to be styled but my parent prevents it</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

then this CSS selector

.style-me:not(.ignore-my-descendants *) {
    color: red;
}

will not match anything. Maybe because :not() only accepts simple selectors which is not given here (I'm not sure, hope you can tell me the true reason). Is there a pure css way to filter out those elements that have a parent matching a given criteria?

EDIT: i don't want to apply any values to the elements to be ignored. This is important because the desired display property value of an element cannot be foreseen.

Upvotes: 5

Views: 3108

Answers (1)

U.P
U.P

Reputation: 7442

umm... you are selecting a child and asking to match its parent. Won't work

There is an easy way

.style-me {
    color: red;
}

.ignore-my-descendants .style-me {
        color: white;
    }

Upvotes: 4

Related Questions