How to use CSS: not () correctly?
I just looked at the pseudo class :not()
and tried an example there. Interestingly, it looks different on my local machine than it does 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>
Output:
Some texts. <- It's red.
Some other texts. & - Is it green ?! (It should be black or any default color)
Another text <- This is green.
While inspecting the element, I found that it Some other text
somehow inherits the green color from the body
affected one :not(p)
.
So why is the MDN site showing it correctly? This is the 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 correctly :not()
and prevent inheritance from unexpected results?
source to share
Actually, both are correct.;) In the jsFiddle, first try defining a default color like
body { color: blue; }
Currently the body does not have a special set of colors, so it :not(p)
is applied to the body, and p.classy inherits the color from the body.
See http://jsfiddle.net/3Jqxr/1/ for an updated example.
EDIT: Since the selector spec is :not
higher than the simple one body
in CSS, you really need to set the default color with
body:not(p)
for this example.
source to share
Since you are not setting a default for <p>
, your element <p class="classy">
inherits from the body. You probably want to exclude <body>
from the ruleset:
body :not(p) { color: green; }
Alternatively, you can set the default:
p{ color: black; }
p:not(.classy) { color: red; }
:not(p) { color: green; }
source to share