CSS のグループ化とネストされたセレクター

CSS のグループ化とネストされたセレクター

いわゆるグループ化セレクターとは、複数のセレクターに対応する要素が同じスタイルを必要とする場合、複数のセレクターをカンマで区切ってスタイル ステートメントの前に配置して複数のセレクターを実現できることを意味します。 style宣言も同様の効果があります

いわゆるネストセレクターとは、セレクター内にセレクターに対応する要素のスタイルを設定するものです

スタイルシートには同じスタイルの要素がたくさんあります。

h1{color:green;}
h2{color:green;}
p{color:green;}

コードを最小限にするには、グループ化されたセレクターを使用できます。
各セレクターをカンマで区切ります。
以下の例では、上記のコードにグループ化されたセレクターを使用しています:

h1,h2,p{color:green;}

ネストされたセレクター

セレクター内のセレクターのスタイルを設定するのに適している可能性があります。
次の例では、3 つのスタイルが設定されています:

すべての p 要素のスタイルを指定します

class="marked" を持つすべての要素のスタイルを指定します

class="marked" 要素内のすべての p 要素のスタイルを指定しますスタイル