What characters are widely supported in CSS class names?

Question

As detailed here among other places, the only valid characters in a html/css class name is a-z, A-Z, 0-9, hyphen and underscore, and the first character should be a letter. But in practice, what characters are in fact supported by most browsers? More specifically, I wonder what browsers properly understands a slash (/) in a class name, and what browsers support class names starting with a number.

I'm primarily interested in getting an answer for html rather than xhtml, in case there is a difference.

Thank you.

Answer 1

/ and other symbols are used as selectors (especially in CSS3) so can not be used in class names. The supported characters are the ones you already said.

Answer 2

http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html

If you look at the grammar you understand that identifiers are defined as

ident       {nmstart}{nmchar}*
nmstart     [a-zA-Z]|{nonascii}|{escape}
nmchar      [a-z0-9-]|{nonascii}|{escape}
nonascii    [^\0-\177]
unicode     \\[0-9a-f]{1,6}[ \n\r\t\f]?

so here's your answer..

(this is for CSS2)

Answer 3

Note that class names are defined by HTML, not CSS. HTML4 says the class attribute is a cdata-list, which is space-separated tokens. So a single classname token can contain any character except the whitespace characters.

I wonder what browsers properly understands a slash (/) in a class name, and what browsers support class names starting with a number.

To refer to such names in a CSS class selector you would need to use an escape. eg.:

<div class="1blah/bläh">

is matched by:

.\31 blah\2F bläh { ... }

This is supported by all current browsers. It wasn't supported by IE5, but that's thankfully no longer a concern. (If you had concerns about character encoding mismatches, you might prefer to encode the ä as \E4, but that's not a limitation of CSS as such.)

If you're asking which browsers will let you get away with the invalid selector

.1blah/bläh

Then, well, who cares really? Just use the valid one.

Answer 4

Unicode works http://snook.ca/archives/html_and_css/unicode_for_css_class_names