HTML5 supports numbers as id and class name , but css selector have some rules ,
- A valid name should start with a letter (a-z)[A-Z] , an underscore (_), or a hyphen (-) which is followed by any numbers, hyphens, underscores, letters.
- A name should be at least two characters long.
- Cannot start with a digit, two hyphens or a hyphen followed by a number .
If you are using numbers as class or id name
<h1 class = "10"> 10 class name </h1>
Then, you need to escape it based on its Unicode code point. To escape it , the code point for the character 1
is U+0031
, so you would escape it as \000031
or \31
.
Simply to escape any numeric character, just prefix it with \3
and append a space character .
Now we need to write css as.\31 0 { color :red;}
To escape special character we can use \
<h1 class = "#"> Special chanracter </h1>.\# { color :blue; } To find unicode code-point use this function function getUnicodeCodePoint(char) { var hex = "1".codePointAt(0).toString(16); return "\\u" + "0000".substring(0, 4 - hex.length) + hex; } If you don’t understand or don’t want to add difficulties to your code , then you can use this simple method. <h3 class="10"> simple selector </h3> [class = '10'] { color : brown; } References https://mathiasbynens.be/notes/css-escapes https://stackoverflow.com/questions/48009201/how-to-get-the-unicode-code-point-for-a-character-in-javascript