Minified CSS changes rendering with :not tag

Support
,
1

On my site indicatrix.org (or optimistic-lichterman-dd9228), there’s a button on the homepage (the one that says “Learn more about me”) that displays fine with CSS minification off, but when I turn on CSS minification it turns white-on-white. The reason appears to be that there’s this CSS rule:

.wg-hero.dark a:not(.wg-hero .btn) {
  color: #fff;
}

This rule does not apply to the button, because although it is inside .wg-hero.dark, it has the class btn. However, when minimized, this rule becomes:

.wg-hero.dark a:not(.wg-hero.btn){color: #fff;}

with the space between .wg-hero and .btn removed. Now this rule applies incorrectly, because the button does not have the .wg-hero class applied directly. The minifier shouldn’t remove this space, I think.

2

Hey, the not:() selector requires comma separated values.

:not(.wg-hero, .btn)

Hope this helps!

3

Thanks, I’ll raise this with the theme developer.

Matt

2 Likes