[CSS] HTMLのIDやclassに数字から始まる文字列をどうしても書きたい場合の方法

Webページを作っていた時に、何故だかCSSが適用されなくなりました。 あれ？ちゃんとセットしているのに、何故だだか全く適用されません。 どうやら数値から始まる文字はclass名で使っちゃいけないという仕様でした。 これまでたくさんcssを使ってきたのに、知らんかった自分がハズカシィ！ でも、3D表示する処理を作っていたので、3Dっていうクラス名を付けたいんですよね。 どうやら、class名として、数値はじまりの使ってはいけないというのは、CSSのSelectorで普通に使えないということなので、HTML的には問題なさそうです。 そして、CSSのSelectorでの裏技もあることがわかったので、その対応について備忘録しておきます。

HTMLのclassで使えない文字列

一般的にclassの記述は次のルールを守るように、どこのWebサイトでも記載されています。

1. 数字からはじまる文字
2. -(ハイフン)と_(アンダースコア)以外の記号
3. 改行と半角スペース

今回は、これらのやっちゃいけないと言われている事に対応してみたいという強いエンジニアリング欲求を満たすための記事です。

数字からはじまる文字対処法

class属性の数字スタートの文字列サンプル <p class="1">数字から始まるclass記述</p> CSSのSelectorで対応するには次のように書きます。 .\31{ color:red; }

解説

class名へのアプローチは、.（ドット）文字列で行いますが、".1"としても、Selectorが機能しません。 そこで、文字コードでSelectorするエンジニア用の裏技があり、 数値が1の場合は、\31と書くと、 Selectorでアタッチできるようになります。 数値が2の場合は、\32 数値が3の場合は、\33 数値が4の場合は、\34 数値が5の場合は、\35 数値が6の場合は、\36 数値が7の場合は、\37 数値が8の場合は、\38 数値が9の場合は、\39 数値が10の場合は、\31 1 なんとなくルールが理解できたでしょうか？ ちなみに、10は、最初の1のみをコードエスケープすれば良いのですが、次の文字との間に半角スペースを入れるというのが必要になります。 なので、class="3D"を実現するには次のように書きます。 .\33 D{ color:red; } ここで言っている文字コードは、数字の1は、コードの数値が10新数で49なんですが、これを16新数にすると"31"になるということです。 こちらのツールを使って簡単に計算できますよ。 2進数、8進数、10進数、16進数相互変換ツール

文字エンコードの注意点

上記は、文字エンコードが、UTF-8の場合の書き方なので、それ以外のエンコードの場合は、文字コードが違うのでご対応ください。

規約記載ページ

CSS の構文 — CSS Syntax Module Level 3（日本語）

-(ハイフン)と_(アンダースコア)以外の記号

通常、CSSに対応するクラス名には、-（ハイフン）と_（_）しか使いませんが、文字コードでセレクタ対応できるのであれば、次のようなclass名でも対応できるでしょう。 <p class="$">使えない記号対応のclass記述</p> CSSには、次のように書きます。 .\24{ color:red; } 簡単ですね。

文字列途中の記号対応

そして、文字列の途中に記号が入るパターンはどうでしょう？ <p class="a&b&c">使えない記号対応のclass記述</p> もちろん、こうしたclass名にも対応できます。 .a\26 b\26 c{ color:red; } ルールがわかればもう怖くないですね。

改行と半角スペース

最後に、改行と半角スペースに対応してみたいと思います。

改行セレクタにマッチ

あまり使わないとは思いますが、改行でもセレクタマッチできます。 <p class="abc def">使えない記号対応のclass記述</p> p[class="abc\A def"]{ color:blue; } ".abc\A def"とするといいかと思ったらうまくいかず、属性マッチすることで改行にマッチすることができました。

半角スペースにマッチ

<p class="foo bar">使えない記号対応のclass記述</p> 半角スペースは、class名を分割する意味があるので、通常は次のように書くことでセレクタマッチすることができます。 .foo.bar{ color:red; } これも裏技対応すると次の記述でマッチできます。 p[class="foo\20 bar"]{ color:red; }

あとがき

やっぱりCSSは、奥が深いスクリプト言語ですね。 バージョンアップし続けていてできないことが限りなく少なくなっているので、規約で禁止されていても、できちゃうって、プログラム言語ではあり得ないんですが、 それでもやっちゃえるって、本当に面白すぎます。 重要なのは、「出来そうにないけど、できるといいな」を考える事ですね。