[CSS・JS] id・class名の頭文字が数字の時にスタイル適用・発火できない方へ

現象

id=2cs3jk244k355vg3のような、id名が乱数生成されたものに対して、スタイルを適用したかったが、どうしても反応している様子がなかった。
コードは以下のような形

hello.html

<div id="2cs3jk244k355vg3">Hello</div>

hello.css

/* 文字が赤くならない！！！！　*/
div#2cs3jk244k355vg3 {
  color: red;
}

解決策

調べたら、頭文字の数字のclass idは頭文字をエスケープしないと認識してくれない仕様らしい。
なので、.htmlの方はそのままで、.cssを以下のように修正することで認識してくれました。

hello.css

/* 無事文字が赤くなった　*/
div#\0032 cs3jk244k355vg3 {
  color: red;
}

div#\0032 の部分は div#\32 でもOKです。

要するに、cssのid classの頭文字が数字の場合は \003または\3をエスケープ文字としてエスケープしてあげれば使用できるということです。

一般的に頭文字に数字があるパターンは広く使われてはいないし、私自身あまり困ったことはないので、そもそも命名をうまくできないかを考えた方がよいのだろうと思います。
今回のケースは広告設置の際に、勝手に決められたidに対して、無理やりスタイルを上書きするという稀なケースだったので。(結局先方にスタイル直してもらったからやらずに済んだ)

jsも基本的に同じ

自分の環境で試してはいないのですが、調べるとjsも同じ挙動をするらしいです。
唯一違う点は、エスケープ文字が \003 \3 ではなく \\003 \\3 なので気をつけてください。

他の特殊文字

他の記号だったりもエスケープすれば使えるはずです。その場合はエスケープ文字は \03 ではなくなると思うので、調べて試してみてください。(使わないし調べる気がでませんすいません)

おわり

jsや他の記号も再現できた方はコメントしていただけると幸いですm(_ _)m