CSS selector for class name starting with number.


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 numbershyphensunderscoresletters.
  • 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;



Please enter your comment!
Please enter your name here