title: CSS selector which takes all label.control-label except from form with class .floating-labels
body: <p>I have this piece of code:</p>
  
  <pre><code>label.control-label{
      font-weight: bold;
  }
  label.control-label::after{
      content: ":";
  }
  </code></pre>
  
  <p>Which makes <a href="https://bootswatch.com/paper/" rel="nofollow" title="Bootswatch Paper">Bootswatch Paper's</a> labels for input bold and adds <code>:</code> after label, and it works very well. Then I found a way to create floating label: <a href="http://news.bootswatch.com/post/110161099627/material-design-in-bootstrap-with-paper" rel="nofollow" title="Paper description and example of floating labels">Paper description and example of floating labels</a> and, to prevent behavior change in other forms, I add class <code>.floating-labels</code> to one of form and created this CSS:</p>
  
  <pre><code>/* Based on Ryan Walters solution http://jsfiddle.net/RyanWalters/z9ymd852/ 
  
  */
  
  /* --- material floating label --- */
  
  form.floating-labels .form-group {
      display: flex;
      height: 55px;
  }
  
  form.floating-labels .control-label {
      font-size: 16px;
      font-weight: 400;
      opacity: 0.4;
      pointer-events: none;
      position: absolute;
      transform: translate3d(0, 22px, 0) scale(1);
      transform-origin: left top;
      transition: 240ms;
  }
  
  form.floating-labels .form-group.focused .control-label {
      opacity: 1;
      transform: scale(0.75);
  }
  
  form.floating-labels .form-control {
      align-self: flex-end;
  }
  
  form.floating-labels .form-control::-webkit-input-placeholder {
      color: transparent;
      transition: 240ms;
  }
  
  form.floating-labels .form-control:focus::-webkit-input-placeholder {
      transition: none;
  }
  
  form.floating-labels .form-group.focused .form-control::-webkit-input-placeholder {
      color: #bbb;
  }
  </code></pre>
  
  <p>And it also works and doens't make mess with forms without <code>.floating-labels</code> class, except one mistake - <code>:</code> is also added to floating labels, which looks a little bit weird. So i want to create CSS selector which takes all <code>label.control-label</code> whithout these allocated in <code>form</code> with class<code>.floating-labels</code>. I created this CSS, but solution is <strong>not working</strong>:</p>
  
  <pre><code>label.control-label:not(form.floating-labels label.control-label){
      font-weight: bold;
  }
  label.control-label:not(form.floating-labels label.control-label)::after {
      content: ":";
  }
  </code></pre>
  
  <p>I will be very happy if anybody helps me to achieve CSS selector, which will take all <code>label.control-label</code> except these inside <code>form</code> with class <code>.floating-labels</code> - thank you in advance.
  Code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label.control-label:not(form.floating-labels label.control-label){
    font-weight: bold;
  }
  
  label.control-label:not(form.floating-labels label.control-label)::after{
    content: ":";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;label class='control-label'&gt;Should has ':' and be bold&lt;/label&gt;
      &lt;input&gt;
   &lt;/form&gt;
  &lt;form class='floating-labels'&gt;
    &lt;label class='control-label'&gt;Should NOT be bold&lt;/label&gt;
      &lt;input&gt;
   &lt;/form&gt;</code></pre>
  </div>
  </div>
  
  <strong>Solution</strong>, based on @Diego López's answer:</p>
  
  <pre><code>form:not(.floating-labels) label.control-label{
      font-weight: bold;
  }
  form:not(.floating-labels) label.control-label::after{
      content: ":";
  }
  </code></pre>