グループセレクター

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 14/76。

グループセレクターは、複数のHTML要素を選択し、それらすべてに同じスタイルを適用するために使用されます。これは、各要素に対して個別のルールを記述することなく、異なる要素に共通のスタイルセットを適用したい場合に特に便利です。セレクターをグループ化することで、より簡潔で効率的なCSSコードを記述できます。

グループセレクターを使用するには、グループ化したいセレクターをカンマ（,）で区切って列挙します。基本的な構文は次のとおりです：

selector1, selector2, selector3 {
    property: value;
}

例えば、すべての <h1>、<h2>、および <p> 要素に同じテキストの色とフォントサイズを適用したいとします。次のようにグループセレクターを使用できます：

h1, h2, p {
    color: blue;
    font-size: 16px;
}

この例では、グループセレクターはすべての <h1>、<h2>、および <p> 要素をターゲットにします。宣言により、これらすべての要素のテキストの色が青に、フォントサイズが16ピクセルに設定されます。

タイプセレクタ、クラスセレクタ、IDセレクタなど、あらゆる種類のセレクタをグループ化できます。

h1, .highlight, #intro {
    background-color: yellow;
}

チャレンジ

簡単

見出し（<h1>、<h2>）、段落（<p>）、およびディビジョン（<div>）を含む、さまざまな要素を持つHTMLドキュメントが与えられます。あなたのタスクは、グループセレクターを使用してこれらの要素にスタイルを適用することです。以下の手順に従ってください。

すべての <h1> 要素と <h2> 要素をターゲットにするグループセレクターを使用して、CSSルールを記述してください。これらの要素のテキストの色を "red" に設定します。
すべての <p> 要素と <div> 要素をターゲットにするグループセレクターを使用して、CSSルールを記述してください。これらの要素の背景色を "lightgray" に、フォントサイズを "18px" に設定します。

チートシート

グループセレクターを使用すると、セレクターをカンマ（,）で区切ることで、複数のHTML要素に同じスタイルを適用できます。

selector1, selector2, selector3 {
    property: value;
}

要素セレクターをグループ化する例：

h1, h2, p {
    color: blue;
    font-size: 16px;
}

あらゆる種類のセレクター（タイプ、クラス、ID）をグループ化できます：

h1, .highlight, #intro {
    background-color: yellow;
}

自分で試してみよう

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>