:not selector in CSS [duplicate]

Question

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

<div class="container">
  <div class="column c1">
    <div class="text">
      text in column 1
    </div>
  </div>
  <div class="column c2">
    <div class="text">
      text in column 2
    </div>  
  </div>
  <div class="column c3">
    <div class="text">
      text in column 3
    </div>  
  </div>
</div>

I want all text elements, except the ones in a c1 element, to be bold. I don't know in advance how many columns there can be.

I've tried the following CSS that makes use of the :not selector, but it renders everything bold:

.container {
  display: flex;
}

.column {
  padding: 0 1em;
}

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

Why isn't the :not selector working? What am I doing wrong? Here is a jsfiddle to try out.

Answer 1

See here. You have to declare the column class.

This does the job:

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

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