My browser doesn't 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 this 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 opacity for such an element that satisfies the selector for opacity: 0 !important; (as was seen with jQuery), equal to 1. My Google Chrome (47.0.2526.106, Ubuntu 15.04, 64 bit) the browser uses only the first rule (the only thing to clarify: the rule with opacity 0 is absent, but overriden: completely missing in the match).

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

Answer 1

Following @Harry's comment, you cannot combine selectors in your :not() . (Data provided by @TJCrowder:: :not , simple selector , selector sequence )

In this case, 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 much simpler with LESS or a similar higher level CSS version:

 .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 complex selector suggested in the first block of code, while it is much easier to read.

Answer 2

Actually, what @NietTheDarkAbsol answered is the expected answer: my selector is not valid in CSS (yes, in jQuery).

However, rewriting logic also requires maintaining class relationships. It means:

A. A bi-target measure that does not satisfy the following 4 conditions at the same time should 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) type BUD-active

The selector in its response creates 0 when at least one of the corresponding -active filters -active not set. Since several -active filters may be available for each label, the solution should have been changed by default by default (i.e., Opacity is 0 by default and will not be 0 if there are additional classes). Sass script is as follows:

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