Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]

by

There are no CSS classes. The question logically splits to two questions: can you start a class name with a digit in HTML, and (assuming the answer is “yes”, as it is) if it does, how do you use the corresponding class selector in CSS?

Various HTML specifications impose various restrictions on class names, but in browser practice, and according to HTML5, there are no limitations, except that a class name cannot contain whitespace characters. So class=000000-8 is valid.

By CSS syntax rules, a CSS identifier cannot being with an unescaped digit. Therefore, a selector like .000000-8 is invalid. But the digit can be escaped, by CSS escaping rules: the selector

.\30 00000-8

or, equivalently,

.\00003000000-8

is valid and matches an element with class=000000-8.

Needless to say, class names starting with a digit are best avoided, but if you have to work with them (e.g., because some HTML documents have them and you cannot change the markup), this is the way.

More Related Contents:

  1. Is there a CSS parent selector?
  2. What do commas and spaces in multiple classes mean in CSS?
  3. Complex CSS selector for parent of active child [duplicate]
  4. Select every Nth element in CSS
  5. CSS3 selector :first-of-type with class name?
  6. CSS Selector that applies to elements with two classes
  7. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  8. CSS ‘>’ selector; what is it? [duplicate]
  9. CSS selector based on element text? [duplicate]
  10. Should I avoid using !important in CSS?
  11. CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
  12. Pure CSS checkbox image replacement
  13. Handling a colon in an element ID in a CSS selector [duplicate]
  14. How to write a CSS hack for IE 11? [duplicate]
  15. :not() selector not behaving the same between Safari and Chrome/Firefox
  16. CSS selector for attribute names based on a wildcard
  17. IE8 :nth-child and :before
  18. CSS selector to select first element of a given class
  19. Invalid CSS selector causes rule to be dropped: What is the rationale?
  20. Style child element when hover on parent
  21. How to select the first, second, or third element with a given class name?
  22. Can I use variables for selectors?
  23. Combine :after with :hover
  24. What does the dot mean in CSS?
  25. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  26. :active css selector not working for IE8 and IE9
  27. Is there such a thing as an “all inclusive sibling” CSS selector?
  28. CSS selector involving pseudo class first-child and dropcap
  29. Multiple descendant children selector with css [duplicate]
  30. Targeting position:sticky elements that are currently in a ‘stuck’ state

Leave a Comment