I am learning about the :not()
pseudo class and it is not working as expected.
I want to color all text red except for .mind
. For some reason this is not preventing the .mind
element from being red.
:not(.mind) {
color: red
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
Keep this in mind:
:not()
is equivalent to *:not()
When there is no selector prefixing the :not()
pseudo-class, a universal selector is implied:
If a universal selector represented by
*
(i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the*
may be omitted and the universal selector's presence implied.
Therefore, the rule you have:
:not(.mind) {
color: red
}
... is saying apply red color to all elements except the element with the class mind
.
Okay, except in this case, the color
property is inheritable, so even though the red doesn't get applied to the .mind
element, it still gets the red through inheritance from the .parent
element.
Here's what the browser is doing:
A quick way to test this behavior is with the border
property, which is not inheritable.
In the example below, using your selector, you'll notice that the border doesn't get applied to .mind
, and your selector works as you were expecting:
:not(.mind) {
color: red;
border-bottom: 1px dashed black;
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
To your particular objective:
I want to color all text red except for
.mind
.
Use a more specific selector.
.parent > :not(.mind) {
color: red;
}
.parent > :not(.mind) {
color: red;
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
This would also work:
div.child:not(.mind) {
color: red;
}
div.child:not(.mind) {
color: red;
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
your selector works fine, because :not(.mind)
is the same as *:not(.mind)
- which is a universal selector - but because .mind
is child of .parent
it will get color:red
inherited from .parent
, and that's why you see it colored red.
To simplify, in this case no need to use :not()
just use .child
.child {
color: red
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
However if you want the .mind
div to have also .child
class, in that case, you can use :not()
like this:
.child:not(.mind) {rules}
Snippet
.child:not(.mind) {
color: red
}
<div class='parent'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
<div class='child'>One</div>
<div class='child mind'>mind</div>
<div class='child'>Three</div>
<div class='child'>
<p>First paragraph</p>
</div>
</div>
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