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