I just looked up the [`:not()`](https://developer.mozilla.org/en/docs/CSS/%3anot) pseudo-class and tried the example there. Interestingly it looks different on my local computer than on the MDN site.

Compare [jsFiddle](http://jsfiddle.net/3Jqxr/) and [MDN example](https://developer.mozilla.org/en/docs/CSS/%3anot#Examples).

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

```

```html
<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*:

```html
<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?