たまーにid名やclass名の先頭に数字を入れたいことが有るのですが、
CSSやjs側に数字をそのまま記載すると反映されません。
一応、どんな事になるか&どうやって対応するか
そして、それをCodePenで実際に書いてみた結果も含めてメモを残します。
【問題】id名やclass名の先頭に数字を記載すると、反映されない
id名やclass名の先頭に数字を記載すると、記載したstyleは反映されません。
なので、数字そのものをid名やclass名として記載すると、記載したstyleはやっぱり反映されません。
という図を書いてみたのが下記になります。
（CSSやJSをポチポチして、反映されていないことをご確認下さい）
See the Pen 【検証実験】_idやclassが数字だと反映されない by kako3 (@kako3) on CodePen.
【対処法】エスケープして記載する（2018/04/11 修正）
id名やclass名の先頭に数字を直に書くと反映されません。
しかし、エスケープすると反映されます。
参考サイト：CSS Syntax Module Level 3(日本語訳)
CSS Syntax Module Level 3(英語)
エスケープの手順は下記の通りです。
- 数字をUnicode(UTF-16)の形式に変換する。
- Unicodeの接頭辞(
U+や\u)が入っている場合は、接頭語をとる。 - 変換した数字の前にCSSの場合は
\をJSの場合は\\を記載する。
※参考ツール：複数の文字コード方式に一括変換 | エンコード / デコード ツール
実際の作業としては、こちらのツールで、
「Unicodeの接頭辞 (エンコード時)」を「\u」に設定して変換後、「u」を抜くのが楽かなという感じです。。。
※数字のエスケープの際は、一文字ずつ変換した数字の前にCSSの場合は\をJSの場合は\\を記載するようになります。
【検証】id名やclass名の先頭に数字をエスケープして書いてみた結果
ということで、先程全然反映されてなかったCSSやjsを、エスケープした文字列で書き直してみたものがコチラになります。
（CSSやJSをポチポチして、反映されていることをご確認下さい）
See the Pen 【検証実験】_idやclassが数字の場合、エスケープした数字で書くと反映される by kako3 (@kako3) on CodePen.
【おまけ】UTF-8もOKなの？ → 数字はたまたま同じだった（数字以外はUTF-8ではダメな模様）
ちなみに、複数の文字コード方式に一括変換 | エンコード / デコード ツールしていて気がついたのですが、
UTF-8の形式でも、UTF-16の形式でも、エスケープ出来る・・・！？
（ということで、ちょっと書いてみたものが下記になります）
See the Pen 【検証実験】_classにエンコードして数字をエスケープしてみた結果 by kako3 (@kako3) on CodePen.
とおもったのですが、数字はたまたまどちらも同じなだけだった模様です(´・ω・`)
ためしに、「にほんご」といひらがなの文字をUTF-8、UTF-16それぞれに変換すると
にほんご →（UTF-8変換）→ \uE381AB\uE381BB\uE38293\uE38194
にほんご →（UTF-16変換）→ \u306B\u307B\u3093\u3054
となるので、それらをCSSでつかえる形式に書き直してIDやclassの設定をしてみたのがこちらです。
See the Pen 【検証実験】_classにエスケープしたひらがなをいれてみる by kako3 (@kako3) on CodePen.
ということで、変換の際はやっぱり UTF-16 で行いましょう(汗)。
【小ネタ】簡易的な覚え方（2018/04/11 修正）
先頭の文字だけエスケープできればstyleは反映されます。
また、どうも0は略しても大丈夫っぽいので、
数字をエスケープしたい場合の簡易的な覚え方が下記のようになります。
- CSSにてid名やclass名の先頭に書く場合は、数字の前に
\3を記載します。 - jsにてid名やclass名の先頭に書く場合は、数字の前に
\\3を記載します。 - 先頭以外の数字や文字列は、先頭の数字の後ろに半角スペース入れ、その後ろに記載します。（半角スペース入れ忘れると、反映されません。）
エスケープ参考資料
| 数字 | CSSに記載する場合 | jsに記載する場合 |
|---|---|---|
| 1 | \31 |
\\31 |
| 2 | \32 |
\\32 |
| 3 | \33 |
\\33 |
| 4 | \34 |
\\34 |
| 5 | \35 |
\\35 |
| --- | --- | --- |
| 10 | \31 0 |
\\31 0 |
| 11 | \31 1 |
\\31 1 |
| --- | --- | --- |
| 1000 | \31 000 |
\\31 000 |
| --- | --- | --- |
| 10001 | \31 0001 |
\\31 0001） |
数字以外の文字列が入った場合も、半角スペースの後ろにそのまま記載します。
ちなみに、%などの特殊文字もエスケープすると使えます。
CSSなら\、jsなら\\を特殊文字の前に付けて記載すると、id名やclass名として利用することができたりします。
| 数字+文字列 | CSSに記載する場合 | jsに記載する場合 |
|---|---|---|
| 1hoge | \31 hoge |
\\31 hoge |
| 1-hoge | \31 -hoge |
\\31 -hoge |
| 1_hoge | \31 _hoge |
\\31 _hoge |
| 1% | \31 \% |
\\31 \\% |
| 1%(hoge) | \31 \%\(hoge\) |
\\31 \\%\\(hoge\\) |
ということで、コチラもCodePenでサンプルを書いてみたのでご参考までに。
（CSSやJSをポチポチして、記載をご確認下さい）
See the Pen 【検証実験】_idやclassが数字の場合、エスケープ検証のおまけ by kako3 (@kako3) on CodePen.
便利ツール
数字のエスケープを行う際は、下記のサイトが便利です。
CSS、jsの双方の記載が出てくるので重宝します。
と、書いておりますが、
シバシバ、ウッカリとエスケープし忘れて記載したりするので、
これを機に忘れないように気をつけていきたいとおもいます(´・ω・`)
そして、一応エスケープはできたけど、なぜそれでOKなのかについて謎が深まってしまいました。
参考文献探しのたびに出て、これだという内容をみつけたら、追記したいと思います。
参考ページ：
jQueryでCSSを適用してみたら思いの外ややこしい結果になった、と思ったらプログラムが破綻していた
色々書き直すきっかけをいただいた記事です。ありがとうございましたm(_ _)m
2018/04/11 表現が適切で無い個所を修正し、Unicodeの内容を追記しました。