ドット付き ID を持つ要素の CSS ID 選択

CSS 仕様では、ID セレクターが特定の HTML 要素を識別できるようにしています。ただし、ID にピリオド (.) が含まれる場合に問題が発生します。 CSS ID セレクターは、そのような ID をネイティブにサポートしません。

CSS 仕様には明確な記載がありませんが、CSS ID セレクターはピリオド付きの ID をタグ名とクラス セレクターの組み合わせとして扱うことが前提となっています。たとえば、「#id.class」は、ID「id」およびクラス「class」を持つすべての要素をターゲットにします。

ただし、ドット付き ID を持つ HTML 要素を参照する外部 CSS ルールを定義すると課題が生じます。 。 CSS 仕様では、CSS の「識別子」にピリオド文字が含まれないことが指定されています。これにより、HTML と CSS 仕様の間に不一致が生じる可能性があります。

CSS ID セレクターを使用する別の解決策は、他の CSS 選択タイプを検討することです。ただし、HTML ID の変更が不可能な場合には、回避策が存在します。

CSS 仕様に従って、バックスラッシュ () エスケープが許可されています。したがって、ドット付き ID を持つ HTML 要素をターゲットにするには、次の構文を使用します。

#some\.id {
  /* CSS Declarations */
}

この例では、ピリオドの前のバックスラッシュにより、CSS セレクターが ID「some.id.」