【備忘録】idやclassの先頭文字に数字は使えないけど、使いたいときにやること（使いたい時は、数字をエスケープする）

たまーにid名やclass名の先頭に数字を入れたいことが有るのですが、
CSSやjs側に数字をそのまま記載すると反映されません。

一応、どんな事になるか&どうやって対応するか
そして、それをCodePenで実際に書いてみた結果も含めてメモを残します。


#【問題】id名やclass名の先頭に数字を記載すると、反映されない
id名やclass名の先頭に数字を記載すると、記載したstyleは反映されません。
なので、数字そのものをid名やclass名として記載すると、記載したstyleはやっぱり反映されません。

という図を書いてみたのが下記になります。
（CSSやJSをポチポチして、反映されていないことをご確認下さい）
<p data-height="350" data-theme-id="0" data-slug-hash="LdgQda" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="【検証実験】_idやclassが数字だと反映されない" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/LdgQda/">【検証実験】_idやclassが数字だと反映されない</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#【対処法】エスケープして記載する（2018/04/11　修正）
id名やclass名の先頭に数字を直に書くと反映されません。
しかし、エスケープすると反映されます。

参考サイト：[CSS Syntax Module Level 3(日本語訳)](https://triple-underscore.github.io/css-syntax-ja.html#escaping)　
　　　　　　[CSS Syntax Module Level 3(英語)](https://www.w3.org/TR/css-syntax-3/#escaping)

エスケープの手順は下記の通りです。

* 数字をUnicode(UTF-16)の形式に変換する。
* Unicodeの接頭辞(`U+`や`\u`)が入っている場合は、接頭語をとる。
* 変換した数字の前にCSSの場合は`\`をJSの場合は`\\`を記載する。

※参考ツール：[複数の文字コード方式に一括変換 | エンコード / デコード ツール](https://so-zou.jp/web-app/text/encode-decode/)
　実際の作業としては、こちらのツールで、
　「Unicodeの接頭辞 (エンコード時)」を「`\u`」に設定して変換後、「`u`」を抜くのが楽かなという感じです。。。
※数字のエスケープの際は、一文字ずつ変換した数字の前にCSSの場合は`\`をJSの場合は`\\`を記載するようになります。


#【検証】id名やclass名の先頭に数字をエスケープして書いてみた結果
ということで、[先程](https://qiita.com/ka-ko/items/feacb4d3ff22666d51b1#%E5%95%8F%E9%A1%8Cid%E5%90%8D%E3%82%84class%E5%90%8D%E3%81%AE%E5%85%88%E9%A0%AD%E3%81%AB%E6%95%B0%E5%AD%97%E3%82%92%E8%A8%98%E8%BC%89%E3%81%99%E3%82%8B%E3%81%A8%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%BE%E3%81%9B%E3%82%93)全然反映されてなかったCSSやjsを、エスケープした文字列で書き直してみたものがコチラになります。
（CSSやJSをポチポチして、反映されていることをご確認下さい）
<p data-height="350" data-theme-id="0" data-slug-hash="KoGQRv" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="【検証実験】_idやclassが数字の場合、エスケープした数字で書くと反映される" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/KoGQRv/">【検証実験】_idやclassが数字の場合、エスケープした数字で書くと反映される</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##【おまけ】UTF-8もOKなの？　→　数字はたまたま同じだった（数字以外はUTF-8ではダメな模様）
ちなみに、[複数の文字コード方式に一括変換 | エンコード / デコード ツール](https://so-zou.jp/web-app/text/encode-decode/)していて気がついたのですが、
UTF-8の形式でも、UTF-16の形式でも、エスケープ出来る・・・！？
（ということで、ちょっと書いてみたものが下記になります）
<p data-height="265" data-theme-id="0" data-slug-hash="bvZKdj" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="【検証実験】_classにエンコードして数字をエスケープしてみた結果" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/bvZKdj/">【検証実験】_classにエンコードして数字をエスケープしてみた結果</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

とおもったのですが、数字はたまたまどちらも同じなだけだった模様です(´・ω・`)

ためしに、「にほんご」といひらがなの文字をUTF-8、UTF-16それぞれに変換すると

にほんご　→（UTF-8変換）→　`\uE381AB\uE381BB\uE38293\uE38194`
にほんご　→（UTF-16変換）→　`\u306B\u307B\u3093\u3054`

となるので、それらをCSSでつかえる形式に書き直してIDやclassの設定をしてみたのがこちらです。
<p data-height="265" data-theme-id="0" data-slug-hash="rdRrxy" data-default-tab="css,result" data-user="kako3" data-embed-version="2" data-pen-title="【検証実験】_classにエスケープしたひらがなをいれてみる" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/rdRrxy/">【検証実験】_classにエスケープしたひらがなをいれてみる</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

ということで、変換の際はやっぱり　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をポチポチして、記載をご確認下さい）
<p data-height="350" data-theme-id="0" data-slug-hash="dmgrGP" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="【検証実験】_idやclassが数字の場合、エスケープ検証のおまけ" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/dmgrGP/">【検証実験】_idやclassが数字の場合、エスケープ検証のおまけ</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#便利ツール
数字のエスケープを行う際は、下記のサイトが便利です。

* [CSS escapes] (https://mothereff.in/css-escapes "CSS escapes")

CSS、jsの双方の記載が出てくるので重宝します。



---

と、書いておりますが、
シバシバ、ウッカリとエスケープし忘れて記載したりするので、
これを機に忘れないように気をつけていきたいとおもいます(´・ω・`)

そして、一応エスケープはできたけど、なぜそれでOKなのかについて謎が深まってしまいました。
参考文献探しのたびに出て、これだという内容をみつけたら、追記したいと思います。

参考ページ：
[jQueryでCSSを適用してみたら思いの外ややこしい結果になった、と思ったらプログラムが破綻していた](https://qiita.com/okeba/items/4366ef5ce3936824ba19)
色々書き直すきっかけをいただいた記事です。ありがとうございましたm(_ _)m

---

2018/04/11　表現が適切で無い個所を修正し、Unicodeの内容を追記しました。