:not selector in CSS [duplicate]

Answer 1

That's because :not(.c1) will select any element that doesn't have that class. That can be the .container too.

Either add a direct child combinator:

:not(.c1) > .text {
  font-weight: bold;
}

Or use the other class as well:

.column:not(.c1) .text {
  font-weight: bold;
}

Answer 2

This can work too :

 .column:not(.c1) .text {
      font-weight: bold;
  }

Answer 3

You simply need to switch from a descendant to a child combinator.

In other words, from this:

:not(.c1) .text 

To this:

:not(.c1) > .text 

revised fiddle

---

Your selector...

:not(.c1) .text {
  font-weight: bold;
}

is equivalent to this:

*:not(.c1) .text {
  font-weight: bold;
}

This selector says:

select an element with class text that is a descendant of any other element, except an element with class c1.

Okay, well, .text is a descendant of a div with class c1 in one instance – so it gets excluded as you intend. But .text is also a descendant of html, body and .container. So the rule fails to work as you expect because it satisfies multiple scenarios.

Instead, try this:

:not(.c1) > .text {
  font-weight: bold;
}

This selector says:

select an element with class text when the parent element does not have the class c1.

Answer 4

See here. You have to declare the column class.

This does the job:

.column:not(.c1) .text {
  font-weight: bold;
}