: not a CSS selector

Question

I need to style text in all elements of an HTML document except those that are nested in a particular class. I can’t control the HTML, I can only change the CSS.

Here is the code snippet:

<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 the elements textexcept the elements in the element c1to be in bold. I do not know in advance how many columns there can be.

I tried the following CSS, which uses a selector :not, but it highlights everything in bold:

.container {
  display: flex;
}

.column {
  padding: 0 1em;
}

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

Why does the selector not work :not? What am I doing wrong? Here is a jsfiddle example to try.

Answer 1

, :not(.c1) , . .container.

:

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

:

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

Answer 2

. column.

:

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

Answer 3

.

, :

:not(.c1) .text 

:

:not(.c1) > .text 

---

...

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

:

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

:

text, , c1.

, , .text div c1 ; ndash; , . .text html, body .container. , , , .

:

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

:

text, c1.

Answer 4

:

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