:not Selector In CSS

I need to style the text in all elements of a HTML document except the ones nested in a specific class. I have no control over the HTML, I can only modify the CSS. Here is a piece

Solution 1:

See here. You have to declare the column class.

This does the job:

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

Solution 2:

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

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

Solution 4:

This can work too :

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