CSSグループセレクタの基本：複数のセレクタにスタイルを一括適用する方法

CSSグループセレクタとは

CSSでは、複数のセレクタに対して同じスタイルを一括で適用できます。この手法は「グループセレクタ」と呼ばれ、コードの重複を減らし、メンテナンス性を高めるために非常に便利です。

使い方はとてもシンプルで、適用したいセレクタをカンマ（,）で区切って並べるだけです。以下の例をご覧ください。

h1, h2, h3 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;
}

このように定義したスタイルルールは、h1・h2・h3要素のすべてに適用されます。なお、セレクタを記述する順序は結果に影響せず、グループ内のすべての要素に対して同じ宣言が反映されます。

idセレクタのグループ化

要素セレクタだけでなく、複数のidセレクタを組み合わせてグループ化することも可能です。以下のように記述します。

#content, #footer, #supplement {
    position: absolute;
    left: 510px;
    width: 200px;
}

この例では、「#content」「#footer」「#supplement」という3つのidを持つ要素が、すべて同じ位置指定と幅の設定を受けます。

グループセレクタ使用時の注意点

• セレクタ間のカンマ（,）を忘れると、スタイルが正しく適用されません。
• 最後のセレクタの後ろにカンマを付けないよう注意しましょう。
• 可読性を高めるため、セレクタごとに改行して記述するのもおすすめです。