Which characters are valid in css class names selectors

在CSS中，类名选择器是由一个点（.）后跟类名来定义的。类名可以包含以下字符：

1. 字母（a-z，A-Z）。
2. 数字（0-9），但不能作为第一个字符。
3. 下划线（_）。
4. 破折号（-），但不能作为第一个字符，除非后面有其他合法字符。
5. ASCII字符：在某些情况下，可以使用转义序列。
6. Unicode字符：可以使用转义序列，允许几乎所有的字符，包括非ASCII字符。

CSS类名的第一个字符不能是数字、破折号，或者更具体地说，不能是任何可以构成数字的字符，包括加号、减号、小数点、或者数字本身。但是，可以通过转义序列在类名中使用这些字符。

CSS类名也必须遵守以下规则：

• 不能包含空格。
• 不能包含任何不被允许的特殊字符，如 ! @ # $ % ^ & * ( ) = + [ ] { } | ; : " ' < > , / ? 等。
• 不能以破折号 - 开头，如果后面没有至少一个更多的字符，因为这会与CSS的“否定”伪类选择器混淆。

例如，以下是一些合法的CSS类名：

css
/* 合法的类名 */
.my-class {}
.class_name {}
.class-name {}
.class3name {}
.u8 {}
.\31stElement {} /* 使用转义序列允许数字开头 */

以下是一些不合法的CSS类名，因为它们违反了上述规则：

css
/* 不合法的类名 */
.3rd-class {} /* 数字开头 */
.-class-name {} /* 用破折号开头，没有紧跟其他字符 */
.my class {} /* 包含空格 */
.$dollar {} /* 包含特殊字符 */

在实践中，开发者通常会选择意义清晰且易于理解的类名，以便维护CSS代码的可读性和可管理性。

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.