Back to all patterns
CSS Class Name Validation
Validation
Validates CSS class names per the CSS specification.
/^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/How it works
CSS identifiers must start with a letter, underscore, or hyphen followed by a letter or underscore. They can contain letters, digits, hyphens, and underscores.
Test Cases
Should Match
- container
- my-class
- _private
- -webkit-transform
Should NOT Match
- 1invalid
- --double-hyphen
- has space
- has.dot
Quick Summary
Validates CSS class names per the CSS specification. Must start with a letter, underscore, or single hyphen (followed by a letter/underscore). Can contain letters, digits, hyphens, and underscores.
Key Takeaways
Key Takeaways
- Cannot start with a digit
- A leading hyphen must be followed by a letter or underscore (vendor prefix convention)
- Double leading hyphens (--) are CSS custom property syntax, not class names
- CSS class names are case-sensitive in HTML5
Use Cases
When to use it
- Validating dynamically generated CSS class names
- Checking class names in CSS-in-JS or Tailwind configuration
- Linting class name conventions in design systems
Watch out
Common Mistakes
- Using class names that start with digits, they must be escaped in CSS selectors
- Confusing CSS custom properties (--var-name) with class names
FAQ
CSS Class Name Validation, Frequently Asked
Are CSS class names case-sensitive?
In HTML5, yes. .MyClass and .myclass are different selectors.
Can I use Unicode characters in CSS class names?
Yes, CSS3 allows Unicode identifiers. This pattern only covers ASCII.