2

:not(p) {
  color: #ff0000;
}
<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

The not(selector) is used to select every element that is not specified element, So in the above code i am getting red color on both p which is a non-selected item.

I am expecting only div,a,h1 to be red, not p as p is a specified element and it is meant to be leave and style have to apply to all others element?

j08691
  • 204,283
  • 31
  • 260
  • 272
Paras Chandravanshi
  • 29
  • 3

4 Answers4

6

The selector :not(p) will select all elements that are not p elements: This includes html and body. We are setting color on both these elements.

Additionally, the property color is inherited by default.

With color being inherited by default and us setting color on body to red, the p elements will inherit the value red for color from their parent, namely body.

You could select only children of body, meaning the de facto browser-default black for body's color will be inherited by the p elements, while all other children that are not p elements will have color set to red.

Note: With selector body :not(p), only children of body will have color evaluate to black. Other elements will have color set to red, which indirect p descendants of body will inherit.

But the easiest way for p elements to have a certain color is to set it (instead of inheriting it).

Oskar Grosser
  • 2,804
  • 1
  • 7
  • 18
  • 1
    And when using your developer tools to debug, make sure to check the computed tab as it will tell you where the element's color is coming from – j08691 Aug 09 '23 at 19:42
1

For the visual explanation from the browser, we can see that the color for both of our <p> elements is being inherited from the body element.

And we are setting our CSS as follows:

:not(p) {
   color: #ff0000;
}

Which means all the elements apart from the p element will have a color set to red, which includes the body element which seems to be the immediate parent for the p in our case. And that is from where the p inherits in this case. Had there been any parent for p elements, then it would have inherited from there. [Image-2]

Hope this helps more to visualize.

enter image description here

enter image description here

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
0

If you want to specifically target the p elements for a different color, you can directly target them like this:

p {
color: blue;

}

If you want to target p elements that are directly inside the body, you can use:

body p {
color: blue; /* or any color you prefer */
constobidullah
  • 3
  • 5
-1

The :not selector doesn't work like that. Before the :not selector you should tell from which parent do you want to select.

body :not(p) targets all elements that are not paragraph elements within the of the HTML document and applies a red color (#ff0000) to their text.

body :not(p) {
    color: #ff0000;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some text in a div element.</div>
<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Rai Hassan
  • 599
  • 1
  • 12