css - ネストされたセレクター (見出し) のグループ化 (CSS)

Question

たとえば、いくつかの要素の一部であるすべての見出しセレクターをグループ<div>化し、それらを短いパラメーターで取得する方法はありますか? 私は次のようなことを意味します：

#content h1, #content h2, #content h3, #content h4, #content h5 { color: green }

要するに：

#content h1-h5 { color: green }

Answer 1

:any最新のブラウザー ( webkitと gecko) のみをサポートする必要がある場合は、疑似クラスを使用できます。

#content :any(h1, h2, h3, h4, h5, h6) {
   color: green;
}

ベンダープレフィックスの使用法については、MDNのリファレンスを参照してください。ただし、このソリューションにはパフォーマンスが低下する可能性があることに注意してください。

バグ 561154 は、:-moz-any() の特異性が正しくないという Gecko の問題を追跡しています。現在 (Firefox 12 の時点) の実装では、:-moz-any() はユニバーサル ルールのカテゴリに分類されています。つまり、これを右端のセレクターとして使用すると、ID、クラス、またはタグを右端のセレクターとして使用するよりも遅くなります。

それ以外の場合は、より広いサポートとより良い保守性のために、他の人が提案したように CSS プリプロセッサを使用してください