w3c css validator parse error

Question

I am getting a unusual error. Trying to remove the last of my w3c erros in css and am left with the following :

.2-col-width-left { float:left; margin-top:10px; width:63%; }
.2-col-width-right { padding-top:10px; float:right; width:37%; text-align:right; }
.3-col-width-left { float:left; margin-top:10px; width:60%; }
.3-col-width-right { padding-top:10px;float:right; width:40%; text-align:right; }
.4-col-full { padding:5px 0; width:100%; text-align:center; }
.4-col-title { margin-top:10px; width:100%; }

I am getting a PARSE ERROR but have no idea why. Have googled but with no luck. Any suggestions?

Answer 1

The issue is that your selectors are starting with numbers. Your selectors should only begin with a letter or escaped number. See here for more details:

http://www.markinns.com/articles/full/using_numbers_as_css_class_or_id_values

And

Which characters are valid in CSS class names/selectors?

Answer 2

The problem is that, according to the CSS spec,

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).

But you can escape them. Just add \00003 before the number at the beginning:

.\000032-col-width-left { float:left; margin-top:10px; width:63%; }
.\000032-col-width-right { padding-top:10px; float:right; width:37%; text-align:right; }
.\000033-col-width-left { float:left; margin-top:10px; width:60%; }
.\000033-col-width-right { padding-top:10px;float:right; width:40%; text-align:right; }
.\000034-col-full { padding:5px 0; width:100%; text-align:center; }
.\000034-col-title { margin-top:10px; width:100%; }