Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

たまーに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の内容を追記しました。

ka-ko
おもに、Web制作のアシスタント業務を行ってます。 一人前になれるように勉強中です(´・ω・`)
ayudante
いつもユーザー中心で技術者とコンサルタントがとことん考え抜く それがアユダンテです
https://ayudante.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away