グループセレクター

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

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

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

selector1, selector2, selector3 {
    property: value;
}

たとえば、すべての <h1>、<h2>、および <p> エレメントに同じテキストの color と font size を適用したいとします。次のようにグループセレクターを使用できます：

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

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

要素型セレクター、クラスセレクター、IDセレクターなど、あらゆるタイプのセレクターをグループ化できます：

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

チャレンジ

簡単

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

すべての <h1> および <h2> 要素を対象とするグループセレクターを使用して CSS ルールを記述します。これらの要素のテキストの color を red に設定します。
すべての <p> 要素と <div> 要素を対象とするグループセレクターを使用して CSS ルールを記述します。これらの要素の background-color を lightgray に、font-size を 18px に設定します。

自分で試してみよう

<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>