Not getting correct output by :not() pseudo class

Question

div:not(.awesome) { color: red; } :not(div) { color: blue; }

<div>Selected for 1st</div> <div class="awesome">Not selected</div> <section>This is selected for 2nd</section> <section>This is selected for 2nd</section>

Now browser shows the first line of html in red color and remaining three lines are in blue color. But I think the second line should not be colored blue because it has class value "awesome" and it is element. So it is against both rules I wrote in my css.Therefor,it should be not styled.Can anybody help?

Temani Afif · Accepted Answer · 2020-06-04 14:39:01Z

Add border to notice that :not(div) is also selecting body and html element. your second element is not being selected but is inherting the color from body.

You can clearly notice there is no border around the second div:

div:not(.awesome) { color: red; } :not(div) { color: blue; border:1px solid }

<div>Selected for 1st</div> <div class="awesome">Not selected</div> <section>This is selected for 2nd</section> <section>This is selected for 2nd</section>

Define a color to body to have another result:

div:not(.awesome) { color: red; } :not(div) { color: blue; border: 1px solid } body { color: green }

<div>Selected for 1st</div> <div class="awesome">Not selected</div> <section>This is selected for 2nd</section> <section>This is selected for 2nd</section>

Better consider a wrapper when applying a selector to make sure the scope of your selection is well defined and you don't select unwanted elements. You may use the body element but it's not recommended because even the body can give you some surprise.

.container div:not(.awesome) { color: red; } .container :not(div) { color: blue; border: 1px solid }

<div class="container"> <div>Selected for 1st</div> <div class="awesome">Not selected</div> <section>This is selected for 2nd</section> <section>This is selected for 2nd</section> </div>

Good explanation. To work around this he can use the body :not(div) selector

Collectives™ on Stack Overflow

Not getting correct output by :not() pseudo class

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related