Edited at

【備忘録】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の内容を追記しました。