Does the :not() pseudo-class support parent elements?

Question

In CSS, can you target an element, then exclude instances of it based on parent wrapper elements higher up the DOM?

For example:

HTML

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>

CSS

li {
    color:red;
}
li:not(.wrap li) {
    colour:blue;
}

So in this instance, I want to exclude the first series of <li> tags based on their parent wrapper. Is this achievable with CSS? (and I don't mean just target .wrap li and apply the desired styles there, as in my case I have to exclude)

That's complicated. Why not just target all lis and make them blue. Then target the .wrap li, and make them red? — Vincent McNabb
– Vincent McNabb, Commented May 17, 2015 at 23:54
stackoverflow.com/questions/7084112/… stackoverflow.com/questions/20869061/… — BoltClock
– BoltClock, Commented May 18, 2015 at 3:55

David Thomas · Accepted Answer · 2015-05-18 00:13:50Z

4

In CSS, can you target an element, then exclude instances of it based on parent wrapper elements higher up the DOM?

No, not the way you seem to be attempting with:

li:not(.wrap li)

You could, though, use instead a more simple approach of styling all <li> elements, and then specifically styling those elements that are descendants of an ancestor with the wrap class-name:

li {
    /* generic styles for <li> elements */
}
.wrap li {
    /* specific styles for <li> elements that are
       descendants of elements with a class of '.wrap' */
}

li {
  color: blue;
}
.wrap li {
  color: red;  
}

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>

Note that the following was removed from the above portion of the answer, due to its fragility - having to escape the period in the selector, and the fact that it's open to accidentally being overwritten by any ancestor having the 'wrap' class-name:

:not(\.wrap) li

li {
  color: red;
}
div:not(\.wrap) li {
  color: blue;  
}

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>

edited May 18, 2015 at 0:13

answered May 17, 2015 at 23:54

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BoltClock Over a year ago

For anyone wondering, what escaping the period in \.wrap really does is transform it from a class selector into a type selector. Since an element of one type cannot be another, this makes div:not(\.wrap) similar to div:not(p), i.e. a guaranteed match for all div elements, albeit with slightly increased specificity. The class attribute is completely removed from the equation. If you wrapped the second ul in its own div, the selector would match all li elements.

Collectives™ on Stack Overflow

Does the :not() pseudo-class support parent elements?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related