How to use CSS :not() properly?

Question

I just looked up the :not() pseudo-class and tried the example there. Interestingly it looks different on my local computer than on the MDN site.

Compare jsFiddle and MDN example.

p:not(.classy) { color: red; }
:not(p) { color: green; }

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text</span>

The output:

Some text. <-- This is red.

Some other text. <-- This is green?! (It should be black or whatever is the default color)

One more text <-- This is green.

Upon inspecting the element, I found that Some other text somehow inherits the color green from the body, which is affected by :not(p).

So why is the MDN site showing it correctly? It's a trick:

<p style="color: red;">Some text.</p>
<p>Some other text.</p>
<p style="color: green;">One more text</p>

So my question is, how to use :not() properly and prevent inheritance from causing unexpected outcomes?

Paul · Accepted Answer · 2013-02-12 12:53:37Z

7

Actually, both are correct. ;) In jsFiddle, try to define a default color first, like

body { color: blue; }

Right now, body has no special color set, so :not(p) applies to body, too, and p.classy inherits the color from body.

See http://jsfiddle.net/3Jqxr/1/ for updated example.

EDIT: Since the specifity of the :not selector is higher than a simple body in CSS, you actually have to set the default color with

body:not(p)

for this example.

answered Feb 12, 2013 at 12:53

Paul

9,0523 gold badges30 silver badges48 bronze badges

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

Comments

Álvaro González · Accepted Answer · 2013-02-12 13:00:52Z

0

Since you don't set a a default value for <p>, your <p class="classy"> element inherits from body. You probably want to exclude <body> from the ruleset:

body :not(p) { color: green; }

Alternatively, you can set a default:

p{ color: black; }
p:not(.classy) { color: red; }
:not(p) { color: green; }

answered Feb 12, 2013 at 13:00

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Collectives™ on Stack Overflow

How to use CSS :not() properly?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related