Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is :not(p) seemingly selecting <p> tags?

Tags:

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.

like image 447
Vincent Arias Avatar asked Apr 16 '13 03:04

Vincent Arias


2 Answers

: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)

like image 153
Niet the Dark Absol Avatar answered Oct 01 '22 14:10

Niet the Dark Absol


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.

like image 40
Krishna Avatar answered Oct 01 '22 12:10

Krishna