CSS selector for class name starting with number.

0
104

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;
}
References

https://mathiasbynens.be/notes/css-escapes
https://stackoverflow.com/questions/48009201/how-to-get-the-unicode-code-point-for-a-character-in-javascript

LEAVE A REPLY

Please enter your comment!
Please enter your name here