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?

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

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?

edited May 23 '17 at 10:31

Community

1
1

answered Mar 21 '14 at 22:20

Dryden Long

9,332
2
28
42

opps, now i feel stupid. Thanks, I will accept when it lets me! – memyselfandmyiphone Mar 21 '14 at 22:23
@AlbaClan Nothing to feel stupid about, this rule is not the most obvious and if it weren't for the fact I'd made the same mistake before, I would have had no clue. – Dryden Long Mar 21 '14 at 22:26

score 1 · Answer 2 · answered Mar 21 '14 at 22:42

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

w3c css validator parse error

2 Answers2