Which characters are valid in css class names selectors

​

The complete regular expression is:\n\n -?(?:[_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])* \n\n- Therefore, except for space, all other characters listed in the regex are allowed directly. However, characters like ~ or ! need to be escaped using backslash (e.g., foo\\~bar) or Unicode notation (e.g., foo\\u007E bar).

Read the W3C specification. (This is CSS 2.1; find the version suitable for your assumed browser.)

In CSS, identifiers (including element names, classes, and IDs in selectors) can only contain characters [a-z0-9] and ISO 10646 characters U+00A1 and above, plus hyphens (-) and underscores (_); they cannot start with a digit or a hyphen followed by a digit. Identifiers can also include escape characters and any ISO 10646 characters as numeric codes (see the next item). For example, the identifier "B&W?" can be written as "B&W?" or "B\26 W\3F".

As pointed out in @mipadi's comment and Kenan Banks' answer on the same page, there is also a warning: Vendor Keywords

In CSS, identifiers may start with "-" (hyphen) or "" (underscore). Keywords and property names starting with "-" or "" are reserved for vendor-specific extensions. Such vendor-specific extensions should follow one of the following formats:

shell
- '-' + vendor identifier + '-' + meaningful name
- '_' + vendor identifier + '-' + meaningful name

Examples:

For instance, if the XYZ organization adds a property to describe the color of the east border of a display, they might name it -xyz-border-east-color.

Other known examples:

• -moz-box-sizing
• -moz-border-radius
• -wap-accesskey

It is guaranteed that no current or future level of CSS will use hyphens or underscores at the beginning of properties or keywords. Therefore, typical CSS implementations may not recognize such properties and may ignore them according to rules for handling parsing errors. However, since hyphens or underscores at the beginning are part of the syntax, CSS 2.1 implementers should always be able to use a CSS-compliant parser regardless of whether they support any vendor-specific extensions.

Authors should avoid vendor-specific extensions.

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

Any character except NUL is allowed in CSS class names. (If CSS contains NUL (escaped or not), the result is undefined. CSS Characters) But in HTML, unassigned code points are also not allowed. HTML cannot include [space characters (space, tab, newline, form feed, and carriage return)] in the class name attribute, because these are class lists, and spaces are used to separate class names here.

Link to Mathias Bynens's answer links to explanation and demo, showing how to use these names. When written in CSS code, class names may require escaping, but this does not change the class name. For example, unnecessary over-escaping makes the representation look different from other representations of the same name, but it still refers to the same class name.

Most other (programming) languages do not have the concept of escaping variable names ("identifiers"), so all representations of a variable must look the same. This is not the case in CSS.

Therefore, if you need to convert a random string to a CSS class name: be mindful of NUL and spaces, and escape accordingly (for CSS or HTML). Done.

You can directly refer to the CSS syntax.

_Generally speaking_1, the identifier must start with an underscore (_), hyphen (-), or letter (a–z), followed by any number of hyphens, underscores, letters, or digits. There is a caveat: if the first character is a hyphen, the second character must be a letter or underscore, and the identifier must be at least two characters long.

regex
-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In summary, the preceding rules translate to the following, excerpted from the W3C specification:

In CSS, identifiers (including element names, classes, and IDs in selectors) can only contain characters from [a-z0-9] and ISO 10646 characters U+00A0 and above, plus hyphens (-) and underscores (_); they cannot start with a digit or a hyphen followed by a digit. Identifiers can also include escape sequences and any ISO 10646 character as a numeric code (see the next item). For example, the identifier 'B&W?' can be written as 'B&W?' or 'B\26 W\3F'.

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

1 Due to the inclusion of escaped Unicode characters (which are rarely used), this becomes more complex.

2 Note that, according to the grammar linked above, identifiers starting with two hyphens (e.g., --indent1) are invalid. However, I am certain that I have encountered this in practice.