Take the 2-minute tour ×

What characters/symbols are allowed within CSS class selectors? I know that the following characters are invalid, but what characters are valid?

~ ! @ $ % ^ & * ( ) _ + - = , . / ' ; : " ? > < [ ] \ { } | ` #
share|improve this question
Related question: stackoverflow.com/questions/2812072/… –  BalusC Jul 7 '10 at 17:17
what about utf8 characters? Like i may type in greek –  Parhs Nov 27 '10 at 17:33
Special characters can be used in class names by escaping them - in your CSS file you can define a .hello/world class by escaping the backslash: .hello\2fworld, hello\2f world or hello\/world –  pyrokinetiq Jun 5 '12 at 0:18
Another related question, not about "syntax of names", but about "syntax of class attribute" when expressing multiple names. –  Peter Krauss Dec 11 '12 at 3:41
add comment

8 Answers

up vote 449 down vote accepted

You can check directly at the CSS grammar.

Basically1, a name must begin with an underscore (_), a hyphen (-), or a letter(az), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.


Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

1 It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

2 Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

share|improve this answer
According to the blog entry in my answer, underscore as the first character won't work in IE6. –  Paolo Bergantino Jan 15 '09 at 23:43
NB: The W3C says that the use of a leading '-' or '_' should be reserved for vendor-specific CSS extensions (e.g., -moz* classes implemented by Mozilla browsers). –  mipadi Jan 15 '09 at 23:44
@Paolo, IE6 doesn't determine what is "valid," which is what the original question asked for. –  strager Jan 15 '09 at 23:49
To update @Pim Jager's comment over two years later, according to w3counter.com/globalstats.php IE6 is now used by less than 3% of users, behind IE9 on 4%, IE7 on 9%, IE8 on 22%. All versions of Firefox have 28%, all versions of Chrome have 17%. –  Daniel Earwicker Jun 15 '11 at 13:49
Everything can be escaped. mothereffingcssescapes.com/#--indent1 –  Mathias Bynens Oct 17 '11 at 9:03
show 8 more comments

Read the W3C spec. (this is CSS 2.1, find the appropriate version for your assumption of browsers)

edit: relevant paragraph follows:


edit 2: as @mipadi points out in Triptych's answer, there's this caveat, also in the same webpage:

In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords and property names beginning with '-' or '_' are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:




Other known examples:



Authors should avoid vendor-specific extensions

share|improve this answer
add comment

To my surprise most answers here are wrong. It turns out that:

Any character except NUL is allowed as CSS class name in CSS. (If CSS contains NUL (escaped or not), the result is undefined. [CSS-characters])

Mathias Bynens’ answer links to explanation and demos showing how to use these names. Written down in CSS code, a class name may need escaping, but that doesn’t change the class name. E.g. an unnecessarily over-escaped representation will look different from other representations of that name, but it still refers to the same class name.

Most other (programming) languages don’t have that concept of escaping variable names, so all representations of a variable have to look the same. This is not the case in CSS.

Note that in HTML there is no way to include space characters (space, tab, line feed, form feed and carriage return) in a class name attribute, because they already separate classes from each other.

So, if you need to turn a random string into a CSS class name: take care of NUL and space, and escape (accordingly for CSS or HTML). Done.

share|improve this answer
@Jamie, you have to distinguish identifier representation and name. – And this is what my answer is about. You talk only about the representation (as many others do), I talk about both. To make it clear: e.g. a class name can start with two hyphens, but in CSS dot-notation it might look like this: .\--blabla. The class name is still --blabla. –  Robert Siemer Apr 16 '13 at 1:00
In which case the css identifiers for 24red -> .\24red (wrong, \24 is a hex character) 24red -> .\32\34red (right, but really hard to read) -24red -> .\-24red --24red -> \.--24red –  Jamie Pate Apr 16 '13 at 16:47
@JamiePate, I think you're still misunderstanding Robert's point. He didn't say that you could place a backslash in front of any class name and have a valid CSS representation of that class name. He said that any class name can have many representations through the use of escape characters and he gave one such example. –  Peter Alfvin Jul 23 '13 at 14:38
add comment

I’ve answered your question in-depth here: http://mathiasbynens.be/notes/css-escapes

The article also explains how to escape any character in CSS (and JavaScript), and I made a handy tool for this as well. From that page:

If you were to give an element an ID value of ~!@$%^&*()_+-=,./';:"?><[]{}|`#, the selector would look like this:



{ background: hotpink; }


  // document.getElementById or similar
  // document.querySelector or similar
share|improve this answer
+1 but why would you need to have a class named that!! :P –  Darryl Hein Jul 6 '11 at 21:38
@Darryl Of course, this is a pretty extreme example, but stuff like class="404-error" can be useful. –  Mathias Bynens Jul 7 '11 at 15:12
add comment

The complete regular expression is:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

So all of your listed character except “-” and “_” are not allowed if used directly. But you can encode them using a backslash foo\~bar or using the unicode notation foo\7E bar.

share|improve this answer
add comment

For HTML5/CSS3 classes and IDs can start with numbers.

share|improve this answer
Do you have a source for this? Maybe I'm missing something, but the CSS3 selectors spec links to the identifiers definition in the CSS 2.1 spec which doesn't permit leading numbers. –  Ryan Nov 27 '10 at 21:45
@Ryan: Here’s a resource for that: mathiasbynens.be/notes/html5-id-class –  Mathias Bynens Jul 7 '11 at 15:12
w3.org/TR/2003/WD-css3-syntax-20030813/#characters <--still doesn't permit leading numbers etc (even though it works) –  Jamie Pate Apr 15 '13 at 22:04
add comment

My understanding is that the underscore is technically valid. Check out:


"...errata to the specification published in early 2001 made underscores legal for the first time."

The article linked above says never use them, then gives a list of browsers that don't support them, all of which are, in terms of numbers of users at least, long-redundant.

share|improve this answer
add comment

Use these character with the browser property.


-moz-property_name " For Mozila"
-op-property name "For Opera"

Try this

share|improve this answer
add comment

protected by Josh Crozier Mar 7 at 0:55


Would you like to answer one of these unanswered questions instead?
