My HTML is this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="stylesheet.css">
<head>
</head>
<body>
<p>hiya</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
</body>
</html>
My stylsheet.css is this:
:not(p)
{
color:#ff0000;
}
Yet everything is red, including <p>
. I've tried Firefox 20, Internet Explorer 10, and Chrome. It doesn't seem to get any more basic than this, but I can't figure out why this isn't working (preventing <p>
from being red, that is). Any help on this would be much appreciated.
:not(p)
matches body
.
The default color
value is inherit
.
p
has no style set.
p
is therefore inheriting its colour from body
, which is red.
Solutions: explicity define what you want to be red, OR explicitly set a different colour for p
(ie. don't use :not
), OR use :not(body):not(p)
This looks it is because you have not defined a specific style for p tag. So :not(p) applies even to body element and inherited.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With