[解決済み】CSSセレクタのクラス名は大文字・小文字を区別する？

質問

CSSは大文字と小文字を区別しないとあちこちで言われていますが、私はこのセレクタを持っています。

.holiday-type.Selfcatering

をHTMLで使用すると、このように拾われます。

<div class="holiday-type Selfcatering">

上記のセレクタをこのように変更すると

.holiday-type.SelfCatering

そうすると、スタイルが拾われない。

誰かが嘘を言っている。

解決方法は？

CSSのセレクタは一般に大文字と小文字を区別しません。これにはクラスセレクタとIDセレクタが含まれます。

しかし HTMLのクラス名 は 大文字と小文字を区別する (属性の定義を参照)そのため、2番目の例ではミスマッチが発生しています。これは HTML5 . ¹

これは、セレクタの大文字と小文字が区別されるためです。 は、文書言語が何を言っているかに依存します :

すべてのセレクタの構文は、セレクタの制御下にない部分を除いて、ASCII範囲内で大文字と小文字を区別しません（すなわち、[a-z]と[A-Z]は同等です）。セレクタの文書言語要素名、属性名、属性値の大文字と小文字の区別は、文書言語に依存します。

そこで、あるHTML要素に Selfcatering クラスは存在するが SelfCatering クラスの場合、セレクタ .Selfcatering と [class~="Selfcatering"] はそれにマッチしますが、セレクタ .SelfCatering と [class~="SelfCatering"] はしないでしょう。 ²

ドキュメントタイプでクラス名が大文字小文字を区別しないように定義されている場合は、それに関係なくマッチします。

¹ <サブ すべてのブラウザのquirksモードでは、クラスとIDは大文字と小文字を区別しません。つまり、大文字と小文字が不一致のセレクタは常にマッチします。この動作は、レガシーな理由から全てのブラウザで一貫しています。 この記事 .

² <サブ 何はともあれ セレクタレベル4 を使用して属性値の大文字小文字を区別しない検索を強制するための構文が提案されています。 [class~="Selfcatering" i] または [class~="SelfCatering" i] . どちらのセレクタも、HTML または XHTML 要素のうち Selfcatering クラスまたは SelfCatering クラス（もちろん、両方でも可）。しかし、クラスセレクタやIDセレクタにはそのような構文がありません（まだ？ いいえ のセマンティクスが関連付けられている）、または使用可能な構文を考え出すのが困難であるためです。