Can CSS Classes Start with Numbers? Workarounds and Best Practices.

Workarounds for CSS Classes Starting with Numbers

While the use of CSS classes starting with numbers is discouraged, there are workarounds to make them valid.

Validity of Class Names

According to HTML5, class names can start with letters (a-z or A-Z), underscore (_), or a hyphen (-). However, they cannot contain whitespace. Therefore, class names such as .000000-8 and .8FFFFFF are valid.

Invalidity of CSS Selectors

CSS syntax rules prevent CSS identifiers from starting with an unescaped digit. Therefore, selectors like .000000-8 are invalid.

Workaround: Escaping Digits

To make CSS selectors valid, the leading digit can be escaped using CSS escaping rules. This can be achieved in the following ways:

. 00000-8

or

.003000000-8 

These escaped selectors will match elements with class names 000000-8.

Recommendations

While these workarounds allow the use of CSS classes with leading digits, it is generally advisable to avoid such naming conventions. This helps ensure compatibility with all browsers and maintains code readability.

The above is the detailed content of Can CSS Classes Start with Numbers? Workarounds and Best Practices.. For more information, please follow other related articles on the PHP Chinese website!