Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
Is it referenced anywhere that CSS classes with names start with numbers doesn't work? for example I found that a class with background like:
.000000-8 {background:url(../../images/common/000000-0.8.png);}
.8FFFFFF {background:url(../../images/common/FFFFFF-0.8.png);}
doesn't work in most browsers I have and the CSS grammar shows that but my question is there a workaround to make CSS classes with names that start with numbers valid? .
Solution 1:
There are no CSS classes. The question logically splits to two questions: can you start a class name with a digit in HTML, and (assuming the answer is “yes”, as it is) if it does, how do you use the corresponding class selector in CSS?
Various HTML specifications impose various restrictions on class names, but in browser practice, and according to HTML5, there are no limitations, except that a class name cannot contain whitespace characters. So class=000000-8 is valid.
By CSS syntax rules, a CSS identifier cannot being with an unescaped digit. Therefore, a selector like .000000-8 is invalid. But the digit can be escaped, by CSS escaping rules: the selector
.\30 00000-8
or, equivalently,
.\00003000000-8
is valid and matches an element with class=000000-8.
Needless to say, class names starting with a digit are best avoided, but if you have to work with them (e.g., because some HTML documents have them and you cannot change the markup), this is the way.
Solution 2:
Yes, it's documented in CSS specification:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters
[a-zA-Z0-9]and ISO 10646 charactersU+00A0and 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). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".