Question

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

Answer 1

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.

In CSS3, what does a comma between declaration blocks mean?

1 个答案: