1. ホーム
  2. html

[解決済み] IDにピリオドを含むCSSセレクタ

2022-11-04 15:08:55

質問

HTMLの仕様では、idにピリオド(.)を使用することができます。

<img id="some.id" />

しかし、CSSのIDセレクタルールを用いると ではなく は正しくマッチしません。

#some.id { color: #f00; }

のCSS仕様は IDセレクタ にはこの件に関する記述がありません。なので、タグ名との組み合わせで使っているのだと思われます。 クラスセレクタ ? 例えば、CSSルールの a.className と書くと、すべてのアンカータグに適用されます ( <a> ) に適用され、クラス名が className のように <a class="className"></a> .

ピリオドが含まれるHTML要素をidで参照する外部CSSファイルルールは可能でしょうか?

CSS の仕様では、CSS " 識別子 は有効な文字としてピリオドを含んでいません。これは、HTMLとCSSの仕様の根本的な不一致なのでしょうか?別の種類のCSS選択を使用するしかないのでしょうか?誰か私より賢い人は、これを確認または否定できますか?

(私は物事を単純化するためにHTMLのid属性からピリオドを削除しますが、それはシステムが生成したidなので、この場合、私はそれを変更する能力を持っていません)。

どのように解決するのですか?

もう少し仕様を調べてみると、CSS 仕様では のバックスラッシュ ( \ ) のエスケープ をエスケープすることで、他の言語と同様に

ですから、私の例では、次のルールがマッチします。

#some\.id {
  color: #f00;
}