title: :not selector in CSS
body: <p>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.</p>
  
  <p>Here is a piece of code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="column c1"&gt;
      &lt;div class="text"&gt;
        text in column 1
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column c2"&gt;
      &lt;div class="text"&gt;
        text in column 2
      &lt;/div&gt;  
    &lt;/div&gt;
    &lt;div class="column c3"&gt;
      &lt;div class="text"&gt;
        text in column 3
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want all <code>text</code> elements, except the ones in a <code>c1</code> element, to be bold. I don't know in advance how many columns there can be.</p>
  
  <p>I've tried the following CSS that makes use of the <code>:not</code> selector, but it renders everything bold:</p>
  
  <pre><code>.container {
    display: flex;
  }
  
  .column {
    padding: 0 1em;
  }
  
  :not(.c1) .text {
    font-weight: bold;
  }
  </code></pre>
  
  <p>Why isn't the <code>:not</code> selector working? What am I doing wrong?
  <a href="https://jsfiddle.net/lucrus/w3y9x0y7/" rel="nofollow noreferrer">Here is a jsfiddle</a> to try out.</p>