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

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.