CSS グルーピングセレクター

JPKODA 編集部 May 6, 2026

CSSの世界において、セレクターは特定のHTML要素を特定し、美しくデザインするための主要なツールです。これまでに、要素セレクター、クラスセレクター、IDセレクター、属性セレクターなど、さまざまなタイプを学んできました。

では、複数の異なる要素に「全く同じスタイル」を適用したい場合はどうすればよいでしょうか？そこで登場するのがグルーピングセレクター（Grouping Selectors）です。この技術は、作業時間と労力を節約するだけでなく、CSSコードをより簡潔にし、メンテナンスを容易にします。グルーピングセレクターを使えば、複数の要素に同時に適用されるルールを1つにまとめることができ、スタイルシート全体の構造をスマートに改善できます。

1. グルーピングセレクターを理解する

グルーピングセレクター（セレクターリストとも呼ばれます）は、同一のCSSルールを複数のHTML要素に適用することを可能にします。各要素に対して個別にルールを書く代わりに、カンマ（,）でセレクターを区切って記述することで、それらを1つのルールに統合できます。これにより、CSS内の冗長性が大幅に削減され、サイト全体のスタイル管理が劇的に楽になります。

1.1 基本構文

selector1, selector2, selector3 {
  property: value;
  property: value;
}

ここで、selector1、selector2、selector3 は、要素セレクター、クラスセレクター、IDセレクターなど、あらゆる有効なCSSセレクターを使用できます。波括弧 {} 内のプロパティと値は、選択されたすべての要素に適用されます。

2. グルーピングセレクターの基本例

この概念をシンプルな例で説明しましょう。ページ上のすべての <h1>、<h2>、<p> 要素に、同じフォントと色を適用したいとします。

グルーピングセレクターを使用しない場合、次のように記述することになります：

h1 {
  font-family: Arial, sans-serif;
  color: #333;
}

h2 {
  font-family: Arial, sans-serif;
  color: #333;
}

p {
  font-family: Arial, sans-serif;
  color: #333;
}

グルーピングセレクターを使用すれば、同じ結果をより効率的に実現できます：

h1, h2, p {
  font-family: Arial, sans-serif;
  color: #333;
}

このたった1つのルールが、すべての <h1>、<h2>、<p> 要素に指定のスタイルを適用します。CSSがより簡潔で読みやすくなったのがわかるでしょう。

3. 異なる種類のセレクターを組み合わせる

グルーピングセレクターは、異なるタイプのセレクターを自由に組み合わせて使用できます。例えば、要素セレクター、クラスセレクター、IDセレクターを1つのグループにまとめることが可能です。

h1, .highlight, #main-title {
  text-align: center;
  margin-bottom: 20px;
}

この例では、スタイルは以下の要素に適用されます：

すべての <h1> 要素
highlight クラスを持つすべての要素
IDが main-title の要素

4. 優先順位（Specificity）の考慮

グルーピングセレクターを使用する際、優先順位（詳細度）はグループ内の個々のセレクターに対して独立して適用されるという点に注意が必要です。グループ全体で1つの優先順位を持つのではなく、それぞれのセレクターが本来持っている詳細度で計算されます。

例えば、次のCSSを考えてみましょう：

p, #unique-paragraph {
  font-size: 16px;
}

この場合、font-size: 16px; 宣言はすべての <p> 要素に適用されます。しかし、ある <p> 要素が unique-paragraph というIDを同時に持っており、かつ別の場所（あるいは同じグループ内であっても）で #unique-paragraph に対して異なるスタイルが定義されている場合、IDセレクターの高い優先順位が勝利します。

さらに具体例を挙げます。次のようなHTMLがあるとします：

<p>これは普通の段落です。</p>
<p id="unique-paragraph" style="font-size: 20px;">これはユニークな段落です。</p>

たとえCSSのグループ内で p と #unique-paragraph の font-size が 16px と定義されていても、#unique-paragraph 要素に直接記述されたインラインスタイル（inline style）の 20px が優先されます。インラインスタイルは最も高い優先順位を持つからです。

5. 実戦例とデモンストレーション

5.1 示例 1：ナビゲーションリンクのスタイル設定

ナビゲーションメニューのリンクに対して、一貫したスタイルを設定したい場合です。グルーピングを使用して、リンクの各状態に同じスタイルを適用できます。

nav a,
nav a:link,
nav a:visited {
  color: #007bff;
  text-decoration: none;
}

nav a:hover,
nav a:active {
  color: #0056b3;
  text-decoration: underline;
}

この例では、異なる擬似クラス（:link, :visited, :hover, :active）をグループ化することで、ナビゲーションリンクの各状態における一貫性を保っています。

5.2 示例 2：フォーム要素の標準化

フォームには通常、<input>、<textarea>、<button> など多様な要素が含まれます。これらに共通のベーススタイルを適用するのに役立ちます。

input[type="text"],
input[type="email"],
textarea,
button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 16px;
}

button {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

この例では、まず異なるタイプのフォーム要素をグループ化し、余白、ボーダー、フォントサイズなどを一括設定しました。その上で、button セレクターのみを使用して、ボタン固有のスタイルを上書き・追加しています。これにより、共通の基盤を作りつつ個別の調整を行うという洗練された管理が可能になります。

5.3 示例 3：重要テキストのハイライト

サイト全体で <strong> と <em> タグを使って、特定の単語やフレーズを一貫して強調したい場合です。

strong, em {
  color: darkred;
  font-weight: bold; /* em要素に対しても、視覚的な強調効果を強めます */
}

このCSSにより、同じ色と太さの設定が <strong> と <em> の両方に適用され、スタイル宣言を繰り返すことなく視覚的な統一感を持たせることができます。

6. 反例：グルーピングセレクターを使用すべきではない場面

グルーピングセレクターは非常に便利ですが、何でもまとめれば良いというわけではありません。ターゲットとする要素が全く異なるスタイルを必要とする場合は、個別にルールを定義すべきです。過度なグループ化は、スタイルの上書きを複雑にし、メンテナンスを困難にする「抽象化しすぎたスタイル」を生む原因になります。

例えば、<h1> タグと <button> 要素を無理にグループ化しようとする場合です。

h1, button {
  /* これら両方にとって適切なスタイルとは限りません */
  font-size: 2em;
  padding: 0.5em;
  border-radius: 5px;
}

このような場合、初期のグループ化ルールが予期せぬ悪影響を及ぼし、後でそれぞれの要素ごとにスタイルを上書きし直す羽目になります。最初から h1 と button に対して個別のルールを定義しておく方が、コードは明確で保守しやすくなります。

1つのルールに固執せず、「共通項」が確実にある場合のみグルーピングを活用するのがプロのやり方です。