12

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.

Community
  • 1
  • 1
last-child
  • 4,481
  • 1
  • 21
  • 19

4 Answers4

10

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.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • +1 and I would love to give you another one for the last line alone! – Jørn Schou-Rode Apr 11 '10 at 14:23
  • 1
    Valid class names *are* defined by CSS. But the ones that are also valid in HTML is just a subset of those. Note that CSS is a style sheet language that can be used for any structured language and not just HTML. – Gumbo Apr 11 '10 at 14:26
  • 2
    Thank you bobince, that solves the problem for me! I originally named this question "What characters are widely supported in HTML class names?" but someone changed "HTML" to "CSS". The important thing for me in this case is to make the HTML readable without risking problems, so this helps a lot. IE5 breaking might not be an issue in this case. Thanks! – last-child Apr 11 '10 at 15:22
  • Ah, I see. [And yeah, there's essentially no difference in XHTML, FWIW.] – bobince Apr 11 '10 at 18:17
  • so `class="a1<2"` is valid ? – Royi Namir Apr 01 '13 at 18:45
  • @Royi: no, but `class="a1<2"` is. – bobince Apr 03 '13 at 15:03
  • @bobince So I don't understand what is `cdata-list` it says anything but whitespaces. So I can't understand why my example is not valid... – Royi Namir Apr 03 '13 at 15:17
  • `a1<2` is a valid CSS class name and a valid value for the HTML attribute `class`. However in HTML if you want to include a literal `<` character in markup you have to spell it as `<`. If you then read the `className` of the element with that attribute you will see it is `a1<2`. – bobince Apr 04 '13 at 09:54
1

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)

Jack
  • 131,802
  • 30
  • 241
  • 343
  • That does not explain what characters or sequences are actually supported. Is `.foo\ bar`, `.\/` or `.\1234` supported? – Gumbo Apr 11 '10 at 14:06
1

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

Azeem.Butt
  • 5,855
  • 1
  • 26
  • 22
-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.

Amy B
  • 17,874
  • 12
  • 64
  • 83