css - CSS2のコンテキストセレクター

Question

なぜ特定のクラス内の要素を次のようにスタイリングするのか疑問に思っています。

.reddish H1 { color: red }

コンテキストセレクターの下のCSS1仕様の正しい構文の例として示されています。

カスケードスタイルシート、レベル1

ただし、CSS2仕様では例として示されていません。

カスケードスタイルシート、レベル2

少なくともその例は見つかりません。このための構文規則はCSS2で変更されましたか、それとも単に正しい構文として推測されますか？

Answer 1

その構文は正しいですが、いくつかの理由で例が変更されている可能性があります。

まず、クラスの機能の説明によってクラスに名前を付けることはベストプラクティスではありません。の場合、.reddish h1CSSの例は、それが赤に着色されることを示しています。ただし、後の設計変更h1で実際に青色にする必要がある場合は、

.reddish h1 { color: blue; }

ほとんど意味がありません。クラスには、それらが表すことになっているスタイルではなく、ページ上の機能または目的で名前を付ける必要があります。

次に、受け取る色はブラウザの解釈に依存するため、色にキーワードを使用することはお勧めしません。代わりに、「赤」の代わりに、16進コード「＃ff0000」を使用して、すべてのブラウザで正確な色を取得する必要があります。（ここでは赤が最良の例ではないかもしれませんが、奇妙な色のキーワードがいくつかあります）。

これらはどちらもそれほど悪いことではありませんが、どちらも、仕様で例が変更された理由を合計することができます。

Answer 2

要素は小文字 (H1 ではなく h1) で記述する必要があります。