Css selector for element which have numbers as class name.

Learn how to select the element which has the 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 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 00031 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

If you find this helpful surprise 🎁 me here.

Share if you feel happy.

Follow Javascript Jeep🚙 if you feel worthy.