CSS: not a pseudo-class does not work

Question

I am studying a pseudo-class :not()and it does not work as expected.

Except I want to color all the text in red .mind. For some reason, this does not prevent the item from .mindbeing 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>

Run codeHide result

Answer 1

Remember this:

:not() equivalently *:not()

If there is no selector, prefix pseudo-class :not(), a universal selector is implied:

6.2. universal selector

, * (.. ) , * .

, :

:not(.mind) {
  color: red
}

... , mind.

, , color , .mind, - .parent.

:

- border, .

, .mind, , :

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

Hide result

:

, .mind.

.

.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>

Hide result

Answer 2

, :not(.mind) *:not(.mind) - , , .mind .parent, color:red .parent, , .

, :not(), .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>

Hide result

, , .mind div .child, :not() :

.child:not(.mind) {rules}

.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>

Hide result

Answer 3

It targets the parent selector, and the child (.mind) inherits it. The code works fine if it .minddoes not inherit the color from the parent.

div:not(.mind) {
  color: red;
}

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

Run codeHide result

In this case, you need to define the rules for .mind.

Answer 4

You can use :notas follows:

.parent :not(.mind){
    color:red;
}

The code:

.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>

Run codeHide result