My browser does not match my CSS (but jQuery does)

Question

Consider these classes:

.bio-target-measure {
  opacity: 1;
}
.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active) {
  opacity: 0 !important;
}

<div class="mark bio-target-measure upperThird-100" title="Muestra
        Plaga: Oidio
        ID: [4]
        Tercios: [&quot;upperThird&quot;]" style="width:100.0%;height:100%;color:white;background-color:#6a6200;">Test</div>

And these jQuery call:

var measures = $('.bio-target-measure');
measures.length; // evaluates to 1.
measures.is('.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active)');
// evaluates to true.

var emptyMeasures = $('.bio-target-measure:not(.lowerThird-25.lowerThird-active):not(.lowerThird-50.lowerThird-active):not(.lowerThird-100.lowerThird-active):not(.middleThird-25.middleThird-active):not(.middleThird-50.middleThird-active):not(.middleThird-100.middleThird-active):not(.upperThird-25.upperThird-active):not(.upperThird-50.upperThird-active):not(.upperThird-100.upperThird-active):not(.bud-25.bud-active):not(.bud-50.bud-active):not(.bud-100.bud-active)');
emptyMeasures.length; // evaluates to 1.

But the opacity for such element, which satisfies the selector for opacity: 0 !important; (as it was seen using jQuery), is 1. My Google Chrome (47.0.2526.106, Ubuntu 15.04, 64bits) browser uses only the first rule (the only is to clarify: rule with opacity 0 is not present-but-overriden: is totally absent in the match).

Question: is the :not rule (as I used it) a valid CSS selector? I know it works in jQuery, but I ask about CSS.

Answer 1

Following from @Harry's comment, you cannot have combined selectors in your :not(). (Evidence provided by @TJCrowder: :not, simple selector, sequence of selectors)

In a case like this, you will need to rework your logic:

.bio-target-measure.lowerThird-25:not(.lowerThird-active),
.bio-target-measure.lowerThird-50:not(.lowerThird-active),
...

This can be made a lot easier using LESS or a similar higher-level version of CSS:

.bio-target-measure {
    &.lowerThird-25, &.lowerThird-50, &.lowerThird-100 {
        &:not(.lowerThird-active) {
            opacity: 0 !important;
        }
    }
    /* define similar blocks for middleThird and upperThird */
}

The above will compile into the complicated selector suggested in the first code block, while being much easier to read.

Answer 2

In fact, what @NietTheDarkAbsol answered is -half- the expected answer: My selector was not valid in CSS (yes, in jQuery).

However, rewording the logic also needs to preserve the classes relationship. This means:

A .bio-target-measure not satisfying the following 4 conditions simultaneously, must have an opacity of 0:

• .lowerThird-(25|50|100).lowerThird-active
• .middleThird-(25|50|100).middleThird-active
• .upperThird-(25|50|100).upperThird-active
• .bud-(25|50|100).bud-active

The selector in his answer produces a 0 when at least one of the corresponding -active filters is not set. Since multiple -active filters could be available for each mark, the solution had to be reworded in a by-default-negative way (i.e. opacity is 0 by default, and will not be 0 when having additional classes). The sass script is like this:

.bio-target-measure {
  @each $lowerThird in 0, 25, 50, 100 {
    @each $middleThird in 0, 25, 50, 100 {
      @each $upperThird in 0, 25, 50, 100 {
        @each $bud in 0, 25, 50, 100 {
          $lowerThirdClass: '.lowerThird-#{$lowerThird}.lowerThird-active';
          $middleThirdClass: '.middleThird-#{$middleThird}.middleThird-active';
          $upperThirdClass: '.upperThird-#{$upperThird}.upperThird-active';
          $budClass: '.bud-#{$bud}.bud-active';

          @if $lowerThird == 0 { $lowerThirdClass: ''; }
          @if $middleThird == 0 { $middleThirdClass: ''; }
          @if $upperThird == 0 { $upperThirdClass: ''; }
          @if $bud == 0 { $budClass: ''; }

          $sum: $lowerThird + $middleThird + $upperThird + $bud;
          @if $sum > 50 {
            $sum: 100;
          }

          &#{$lowerThirdClass}#{$middleThirdClass}#{$upperThirdClass}#{$budClass} {
            opacity: $sum / 100;
          }
        }
      }
    }
  }
}