A validation error occurs when using CSS nesting

Question

When written as described in the CSS Nesting Module, The W3C CSS Validation Service displays an Parse Error. What is the reason?

.foo {
  color: red;

  .bar {
    color: blue;
  }
}

Is there any way to eliminate the error?

Answer 1

The status of the document is the key here. The CSS Nesting Module is still in draft status.

You have three choices:

1. Wait until the spec becomes a recommendation (probably several years). I assume that once this happens, the W3C will update their validator.
2. Ignore the validation error message, or don’t use the W3C validator.
3. Avoid nesting.