What does {}. before a CSS Selector mean?

Question

I was working on some CSS files and I found this:

{}.foo { color: red }

Does anyone know why {}. works in Chrome, even though it is not a correct syntax? Is it just ignored, or does it mean something? I haven't found documentation about it.

Here is a JSFiddle with my example.

h1 {
  color: #f00;
}

{}.ll {
  color: green;
}

<h1>Hello world!</h1>

<p class="ll">This is a demo app that shows how to Fiddle with Firefox OS using JSFiddle! Please fork me and make wonderful things</p>

Answer 1

I don't know why it's in the code sample you found, but it doesn't do anything useful.

It's not required to have whitespace between CSS rules:

.a{color:red}.b{color:blue}.c{color:green}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

And rules (or delimiters) without an associated selector are just ignored:

.a{color:red}{color:blue}.c{color:green}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

Put those together in your {}.foo{color:red}, and the leading {} becomes an empty rule block applying to no element; the parser proceeds on to treat .foo{...} as normal CSS applying to elements with class "foo".

Answer 2

That is simply an empty declaration block.

{}.foo { color: red; }

It is equivalent to this:

{}

.foo { color: red; }

and this:

{ background-color: green; }

.foo { color: red; }

All of which render the same: The first declaration does nothing. The CSS parser simply ignores it.

4.1.7 Rule sets, declaration blocks, and selectors

The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector, it must ignore the selector and the following declaration block (if any) as well.

4.2 Rules for handling parsing errors

In some cases, user agents must ignore part of an illegal style sheet. This specification defines "ignore" to mean that the user agent parses the illegal part (in order to find its beginning and end), but otherwise acts as if it had not been there.