26

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? .

hsobhy
  • 1,493
  • 2
  • 21
  • 35
  • 2
    This question has been answered [css naming rule](http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors) – jwize Jan 20 '14 at 06:43
  • http://www.w3.org/TR/CSS21/grammar.html#scanner – megawac Jan 20 '14 at 06:43
  • I have searched for questions that indicate selectors first character / start with but didn't find any .. now I got there is a question answered this. – hsobhy Jan 20 '14 at 07:00
  • 1
    This question is not a duplicate by any means. The answer referred to doesn't answer the number issue specifically. – 3Dom Jan 15 '16 at 06:02

2 Answers2

40

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Yes, you are right, and while it's not related to browsers I tested and found both selectors worked on my browsers including Safari for windows, IE, IE7, and compatibility views. also tested on smartphones default browsers and iPad Air. – hsobhy Jan 20 '14 at 10:56
  • 1
    Wondering how to escape any character in CSS? [There's a web app for that](https://mothereff.in/css-escapes). – James Furey Sep 08 '16 at 05:20
12

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 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). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

MarcinJuraszek
  • 124,003
  • 15
  • 196
  • 263