kamolog

HTML要素のid値に「.」が含まれているときに，CSSでその要素を選択する方法のメモ．

CSSで次の方法を使う．

1. IDセレクタのid値の指定で「.」を「\」でエスケープさせる
2. 属性セレクタでidを指定する

以下，説明．

HTML4.01では要素のid属性の値を「アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字([0-9])、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.)のみ」で記述できる．なので，

<div id="foo.bar">
hoge
</div>

はHTML4.01のコードとして妥当で，「id属性の値が「foo.bar」であるdiv要素」となる．

しかし，CSS2.1ではHTMLで使用されるスタイルシートについては「.」はクラスセレクタと定義されている．CSSで上記のdiv要素を選択するつもりで

div#foo.bar {
	color: red;
}

と指定すると，「id属性の値が「foo」で，class属性の値がスペースで区切ると「bar」と一致するものがあるdiv要素」，すなわち次のような要素の選択になってしまう．

<div id="foo" class="bar baz">
hoge
</div>

CSSで特別な意味を持つ文字を含むid値を持つ要素を選択する方法は以下のとおり．

1. IDセレクタのid値の指定で「.」を「\」でエスケープさせる
   CSSでは特別な意味を持つ文字を「\」でエスケープできる．「\」を使って「.」をエスケープした例は以下のとおり．

   div#foo\.bar {
   	color: red;
   }

2. 属性セレクタでidを指定する
   属性セレクタでid値を指定して要素を選択する．

   div[id="foo.bar"] {
   	color: red;
   }
   

   属性セレクタがIDセレクタより優先順位が低いことが問題になる場合は，「!import」を使う．

   div[id="foo.bar"] {
   	color: red !important;
   }