1

Yes yes, we all know what a comma between selectors means.

This is different. I thought I knew CSS pretty well, but today I came across something I've never seen before - a comma between declaration blocks. I've been using clean-css, and it generated this minified, cleaned output (I've re-inserted some whitespace for readability):

body .container
{
    color:#EEE
}
,
.navbar-default .navbar-nav>.active>a:hover,
h1
{
    color:#000
}

Notice the comma (which I've placed on its own line) after the closing curly brace in the declaration block for body .container. Is this valid CSS? If so, what does it mean?

My input CSS for clean-css was as follows:

body .container {
  color: #EEEEEE;
}

h1{
  color: #000;
}

.navbar-default .navbar-nav > .active > a:hover, {
    color: black;
}
Community
  • 1
  • 1
alexw
  • 7,840
  • 6
  • 49
  • 85
  • I believe that is invalid CSS. – Aziz Apr 04 '16 at 17:06
  • I want to thank you for asking this question, as I discovered an exclude-IE8-only selector set hack, and a bug in current versions of Chrome/Firefox/Edge because of it. Try a `.selector, #excludeIE8::before` in IE8, or a `.selector, .selector::future-pseudo` in Chrome/Firefox/Edge haha – abluejelly Apr 04 '16 at 19:30
  • No problem, glad I was able to advance the knowledge of IE8 hacks, and thus the collective knowledge of humanity as a whole ;-) – alexw Apr 04 '16 at 20:10

1 Answers1

6

No, it's not valid CSS. A comma in that position implies that there is an empty selector preceding it. But an empty selector is not a selector at all; a selector must contain, at the very minimum, either a simple selector or a pseudo-element (with an implicit *). From the spec:

An empty selector, containing no sequence of simple selectors and no pseudo-element, is an invalid selector.

This may be the result of a bug in clean-css. Alternatively, the input CSS was invalid to begin with and this was simply the result of clean-css's attempt to process it.

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
  • Why the hell would anyone use that XD – Phiter Apr 04 '16 at 17:00
  • Ah ha! It would appear there was indeed some potentially invalid input CSS. There was a rule `.navbar-default .navbar-nav > .active > a:hover, { ... }` - notice the comma between the last selector and the beginning of the declaration block. My apprentice designer still has some things to learn ;-) I'll look more into clean-css and see if they have some kind of `strict` option for catching something like this. – alexw Apr 04 '16 at 17:10
  • Should note that this can also be used as a hack to make an entire rule only load in LTE IE 7, as all other browsers (even IE 8, sadly) will throw out the entire rule regardless of the validity of any other selector(s) for it. – abluejelly Apr 04 '16 at 17:12