Which characters are valid in CSS class names/selectors?

According to modern CSS specifications, class names (identifiers) can include a wide range of characters, but there are important rules on how they can start and how certain characters must be escaped. In practice, you’ll commonly see letters (a–z, A–Z), digits (0–9), underscores (_), and hyphens (-). Other Unicode characters are allowed with the correct escaping rules, and the name generally cannot begin with a digit or two hyphens unless carefully escaped or otherwise valid per newer specs.

Below is a practical rundown:

1. Common, Safe Characters for Class Names

If you stick to these guidelines, you usually avoid most issues:

• Start your class name with a letter (a–z, A–Z) or an underscore (_), or a hyphen (-) followed by a letter or underscore.
• Use letters, digits, underscores, and hyphens in the rest of the name.

Example:

.my-class123 { color: red; }
.another_class { background: blue; }

These are perfectly valid in all modern browsers.

2. The Formal CSS Grammar (Modern Spec)

The W3C’s CSS specifications define identifiers (used for class names, IDs, etc.) through a grammar that roughly states:

ident
  = -? [_a-zA-Z] [\w-]*          (simplified view for ASCII)
    OR
  = a valid escape for special characters or digits at the start

Where:

• A leading hyphen is allowed: e.g., -myClass.
• Letters ([a-zA-Z]), underscores (_), digits ([0-9]), and hyphens (-) are allowed after the initial character.
• You can escape otherwise invalid characters (including digits at the very start) by prefixing them with a backslash (\).

Example of Escaping

.\3123class { color: green; }

Here, the class name effectively is 123class, but we escaped the 1 so that it’s recognized as a valid identifier start. This is rarely done in practice, but it is allowed by the spec.

3. Important Details

1. Cannot Start Unescaped with a Digit
   A name like .123abc is invalid unless you escape the digit. Some older specs allow it in quirks mode, but it’s not recommended.

2. Double Hyphens & Vendor Prefixes
   CSS custom properties often use -- as a prefix (e.g., --main-color). For class names, a double hyphen at the start (. --myClass) might need to be escaped in older contexts, but modern browsers handle single or double hyphens just fine so long as the rest follows valid rules.

3. Unicode Characters
   CSS identifiers support a wide range of Unicode characters. For example, .café is valid if your stylesheet is UTF-8 or you escape the é. The formal spec allows you to write \00E9 if you need to escape the Unicode codepoint.

4. Case Sensitivity
   Class names are case-sensitive in HTML. .myClass and .myclass are different. However, many operating systems and editors might not highlight this if you’re used to case-insensitive environments.

4. Best Practices

• Keep It Simple: Use only [a-z0-9_-] for widest compatibility and clarity.
• Avoid Starting with Digit: Unless you have a specific reason and you’re comfortable escaping it.
• Use Meaningful Names: This is more about maintainability—naming classes in a descriptive way (or following something like BEM) helps keep your CSS organized.

5. Summary

1. Letters, digits, hyphens, underscores are universally valid (with caution about the first character).
2. Don’t start your class name with a digit or multiple hyphens unless you escape them or rely on newer, more permissive specs.
3. Escaping is possible for special characters, digits, or Unicode codepoints.
4. Real-world usage typically keeps class names simple to avoid confusion and cross-browser quirks.

By following these guidelines, you’ll ensure your CSS classes work across all modern browsers and align with the current specifications.