HTMLのクラス名にアルファベット・数字・ハイフン・アンダースコア以外を使ってみる

HTMLのクラス名アルファベット・数字・ハイフン・アンダースコア(なんとなく安全そうな文字)以外って使えるのか?
正直今まで避けていたのだが、この機会に、と思い調べてみた。

DTDには『cdata-list』とあるので、(ホワイトスペース以外の)CDATAは使える(記述はできる)ようである。
問題は、CSSセレクタでそれらの文字をどう記述するか、という所なので、実験してみた。

コード

HTML

<div class="http://omimo.net/code_snippets/html/1217/?key1=value1&cat=%e6%9c%aaというURL">
背景を赤くする
</div>

CSS

.http\3a\2f\2fomimo\2e net\2f code_snippets\2f html\2f 1217\2f\3f key1\3d value1\26 cat\3d \25 e6\25 9c\25 aaというURL {
 background-color: red;
 padding: 1em;
 color: white;
}

実装

背景を赤くする

結論

HTMLのクラス名には、ほぼどんな文字も使えそう。CSSセレクタとして機能させることも可能だった。
CSSセレクタとして使う場合は、
[バックスラッシュ][キャラクタの16進数(hex)値][ホワイトスペース]
に置き換えて記述する必要がある。
上記の例だと、IE6でも問題なく表示できたので、かなり以前から実装も問題なくできていたはず…。
もっと早く知りたかった。

Leave a Reply