6日でできる 新HTML&CSS入門｜複数セレクタの基本
同じスタイルは、まとめて指定するとすっきりする。
複数セレクタを覚えて、読みやすく管理しやすいCSSを書こう。
CSSを書いていると、複数の要素に同じ見た目を適用したい場面がよく出てきます。たとえば、見出しと段落を同じ色にしたい、いくつかのボタンに同じ角丸を付けたい、土曜日と日曜日だけ共通の強調表示をしたい、といった場面です。
このようなとき、要素ごとに同じCSSを何度も書いていると、コードが長くなり、あとから修正するときにも手間が増えてしまいます。そこで役立つのが複数セレクタです。複数セレクタを使うと、カンマで区切って複数の対象を並べ、1回の宣言でまとめてスタイルを適用できます。
複数セレクタは、書き方自体はとてもシンプルですが、実務でもよく使う大切な基本です。コードの重複を減らし、読みやすさを高め、修正もしやすくしてくれます。この記事では、複数セレクタの基本構文から、実践的な使い方、上書きの考え方、よくあるミスまで、やわらかく丁寧に整理していきます。
複数セレクタとは何か
複数セレクタは、同じCSSの宣言を複数の要素にまとめて適用するための書き方です。グループセレクタと呼ばれることもあります。
基本の形は次のようになります。
セレクタA, セレクタB, セレクタC {
プロパティ: 値;
}このように、セレクタをカンマで区切って並べると、並べたすべての要素に同じCSSが適用されます。
たとえば、h2とpの文字色を同じ青にしたい場合は、次のように書けます。
h2, p {
color: #0044cc;
}これで、h2にもpにも同じ色が適用されます。もし複数セレクタを使わなければ、次のように同じ内容を2回書くことになります。
h2 {
color: #0044cc;
}
p {
color: #0044cc;
}意味としては同じですが、複数セレクタのほうが短く、意図も分かりやすくなります。あとから色を変更したいときも、1か所だけ直せばよいので管理しやすいです。
図1：複数セレクタは1回の指定で複数の要素に適用できる
GPT-image-2用プロンプト：
カラーイラスト、16:9横長。明るいオフィスで若い女性Webクリエイターが大型モニターを見ながら複数セレクタを説明している教材風イラスト。モニター左側には別々に書かれた CSS として「h2 { color: blue; }」「p { color: blue; }」を表示し、右側にはまとめた形として「h2, p { color: blue; }」を大きく表示する。さらに h2 と p の見出し・段落が同じ青色で表示される図を添える。中央に「同じスタイルはまとめて指定できる」と日本語で表示する。文字は背景と重ならないように読みやすく配置する。カラー画像、アニメ調、初心者向け教材、16:9横長。
この図から分かること
複数セレクタを使うと、同じスタイルを複数の要素にまとめて適用できます。別々に同じCSSを書くよりも、コードが短くなり、修正もしやすくなります。複数セレクタは、CSSの重複を減らすための基本的で便利な書き方です。
複数セレクタの書き方と読みやすく書くコツ
複数セレクタは、対象となるセレクタをカンマで区切って並べます。カンマのあとに半角スペースを入れなくても動作はしますが、読みやすさのためにはスペースを入れるのがおすすめです。
たとえば、次の2つはどちらも正しく動作します。
h2,p {
color: #0044cc;
}
h2, p {
color: #0044cc;
}どちらも同じ意味ですが、後者のほうが見やすく、セレクタの区切りも分かりやすくなります。CSSは自分だけでなく、ほかの人が見ることもあるため、見やすく整えて書くことが大切です。
複数セレクタは、タグ名だけでなく、classセレクタやidセレクタ、擬似クラスなどとも組み合わせて使えます。
| 利用場面 | 書き方の例 | 意味 |
|---|---|---|
| 同系の見出しをそろえる | h1, h2, h3 | 3つの見出しに同じスタイルを適用する |
| 複数のボタンを共通化する | .btn-main, .btn-sub, .btn-link | 複数のclassに同じ見た目を適用する |
| 特定の要素をまとめる | #sat, #sun | 2つのidに共通のスタイルを適用する |
| 擬似クラスを共通化する | li:nth-child(odd), li:nth-child(even) | oddとevenの両方に共通のスタイルを適用する |
このように、複数セレクタはとても幅広く使えます。単純にタグを並べるだけでなく、いろいろな種類のセレクタをまとめられるのが便利なところです。
どんな場面で複数セレクタが役立つのか
複数セレクタは、複数の要素に同じスタイルを付けたいときに役立ちます。特に次のような場面でよく使われます。
同じ見た目の見出しをまとめたいとき
ページ内のh2とh3に同じ文字色や余白を付けたい場合、複数セレクタが便利です。
h2, h3 {
color: #333;
margin-top: 1.5em;
}複数のボタンに共通デザインを付けたいとき
ボタンの種類は違っても、角丸や内側余白は共通にしたいことがあります。
.btn-primary, .btn-secondary, .btn-danger {
border-radius: 6px;
padding: 8px 14px;
}一部の項目に共通の強調を付けたいとき
土曜日と日曜日だけを太字にしたいような場合にも便利です。
#sat, #sun {
font-weight: bold;
}このように、複数セレクタは似た役割の要素をまとめるときに特に力を発揮します。CSSの重複を避けながら、デザインの統一感を出しやすくなります。
基本サンプル：見出しと段落を同じ色にする
まずは、もっとも基本的な使い方として、h2とpを同じ色にする例を見てみましょう。ここでは、ページタイトルのh1はそのままにして、h2とpだけ青色にそろえます。
ファイル名： lesson27_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数セレクタの基本</title>
<style>
h2, p {
color: #0044cc;
}
</style>
</head>
<body>
<h1>複数セレクタのサンプル</h1>
<h2>青色の小見出し</h2>
<p>この段落は見出しと同じ青色で表示されます。</p>
<h2>もう一つの小見出し</h2>
<p>こちらの段落にも同じ色が適用されます。</p>
</body>
</html>ブラウザの表示例
このHTMLをブラウザで表示すると、h2とpだけが青色になります。h1には何も指定していないため、標準の黒いまま表示されます。
このサンプルのポイントは、1つのCSS宣言でh2とpの両方に同じcolorを適用していることです。もしh2とpを別々に指定していたら、同じcolor: #0044cc;を2回書く必要があります。複数セレクタを使うことで、その重複をなくせます。
使用タグとCSSの確認
| 項目 | 説明 |
|---|---|
| style | HTML内にCSSを書くためのタグ |
| h2, p | 複数セレクタ。h2とpの両方を選ぶ |
| color | 文字色を指定するCSSプロパティ |
| h1 | 指定していないため、今回のCSSの対象外 |
この例はとても基本的ですが、複数セレクタの考え方がよく分かる形です。まずはこのような単純な例で、複数セレクタの動きをしっかりつかんでおくと安心です。
複数セレクタは同じ詳細度で適用される
複数セレクタでまとめた場合、それぞれのセレクタには同じ宣言が適用されます。ただし、あとからより具体的な指定を書けば、その要素だけ上書きできます。ここで大切なのが、CSSのカスケードと詳細度の考え方です。
たとえば、次のようなCSSがあるとします。
h2, p {
color: #0044cc;
}
p.notice {
color: #cc0000;
}この場合、すべてのpは最初青色になりますが、class="notice"が付いたpには、あとからより具体的なp.noticeが適用されるため、赤色になります。
つまり、複数セレクタはあくまで共通の土台をまとめて書くためのものです。必要に応じて、あとから個別の指定で一部だけを変えることができます。この考え方は実務でもとても大切です。
最初に共通のスタイルを書き、そのあとで特定の要素だけを追加で調整する、という流れにすると、CSSを整理しやすくなります。
応用例：曜日ごとの色分けで複数セレクタを使う
次に、もう少し実用的な例として、曜日のリストを色分けするサンプルを見てみます。平日はclassでまとめて指定し、土曜日と日曜日はidで個別に色を変えます。そのうえで、土曜日と日曜日の両方に共通する太字の指定を、複数セレクタでまとめます。
ファイル名： lesson27_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>曜日ごとの色分け</title>
<style>
.workday {
color: #222;
}
#sat, #sun {
font-weight: bold;
}
#sat {
color: #0066ff;
}
#sun {
color: #ff3300;
}
</style>
</head>
<body>
<h1>曜日リスト</h1>
<ul>
<li class="workday">月曜日</li>
<li class="workday">火曜日</li>
<li class="workday">水曜日</li>
<li class="workday">木曜日</li>
<li class="workday">金曜日</li>
<li id="sat">土曜日</li>
<li id="sun">日曜日</li>
</ul>
</body>
</html>ブラウザの表示例
平日の5つのliには、class="workday"によって落ち着いた黒色が適用されます。土曜日と日曜日には、それぞれ別のidが付いているため、土曜日は青、日曜日は赤で表示されます。
さらに、#sat, #sunという複数セレクタによって、土曜日と日曜日の両方が太字になります。ここが複数セレクタの重要なポイントです。土曜日と日曜日で色は別々でも、太字という共通部分だけをまとめて書けます。
このように、共通部分は複数セレクタでまとめ、違う部分は個別に書く、という整理の仕方をすると、とても分かりやすいCSSになります。
図2：共通の指定はまとめて、違いは個別に書ける
この図から分かること
複数セレクタは、複数の要素が共有するスタイルをまとめるのに向いています。一方で、色のように個別に変えたい部分は別のセレクタで追加できます。共通の指定と個別の指定を分けて書くことで、CSSが整理しやすくなります。
共通化と個別指定をどう書き分けるか
複数セレクタを使うときは、共通する部分と個別に変えたい部分を分けて考えるのがコツです。
先ほどの曜日の例でいうと、土曜日と日曜日の共通点は太字であることです。これはまとめて書けます。一方で、土曜日は青、日曜日は赤という違いは、別々に書く必要があります。
この考え方は、ボタンや見出しなどにも応用できます。たとえば、複数のボタンがすべて角丸と余白を共有しつつ、色だけ異なるような場合にも役立ちます。
.btn-save, .btn-cancel, .btn-delete {
padding: 8px 16px;
border-radius: 6px;
}
.btn-save {
background-color: #2d8f4e;
}
.btn-cancel {
background-color: #777;
}
.btn-delete {
background-color: #c0392b;
}このように、共通部分を先にまとめておけば、全体の統一感を保ちながら、個別の違いも作れます。
よくあるミスと気をつけたいポイント
複数セレクタは便利ですが、書き方を少し間違えると意図どおりに動かないことがあります。ここでは、よくあるミスを整理しておきます。
| ミス | 症状 | 対策 |
|---|---|---|
| カンマの代わりにセミコロンを書いてしまう | CSS構文エラーになりやすい | セレクタの列挙はカンマで区切る |
| カンマのあとにスペースを入れない | 動作はするが読みにくい | h2, p のように半角スペースを入れる |
| セレクタをつなげすぎて意味が変わる | 対象が意図と違ってしまう | 何をまとめたいのかを確認する |
| より具体的な指定に上書きされる | 思った色や見た目にならない | あとから書いた詳細なセレクタも確認する |
たとえば、次のような書き方は誤りです。
h2; p {
color: #0044cc;
}セレクタの区切りはセミコロンではなくカンマです。正しくは次のように書きます。
h2, p {
color: #0044cc;
}また、次のようにカンマがなくなると意味が変わることがあります。
h2 p {
color: #0044cc;
}これは、h2とpをまとめているのではなく、h2の中にあるpを選ぶ子孫セレクタの形になります。通常、h2の中にpを書くことはあまりないため、思ったようにCSSが効かない原因になります。
複数セレクタでは、カンマが「これと、これと、これ」という意味を持つことをしっかり意識しておくと安心です。
練習問題：奇数行と偶数行の共通部分をまとめる
複数セレクタは、擬似クラスと一緒に使うこともできます。ここでは、リストの奇数行と偶数行で背景色を分ける例を見てみます。
ポイントは、奇数行と偶数行で背景色は違っても、内側余白は共通にできることです。その共通部分を、複数セレクタでまとめています。
ファイル名： lesson27_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>奇数行と偶数行の色分け</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
width: 220px;
}
li:nth-child(odd),
li:nth-child(even) {
padding: 8px 12px;
}
li:nth-child(odd) {
background-color: #ffffff;
}
li:nth-child(even) {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>リストの背景色を交互に変える</h1>
<ul>
<li>商品A</li>
<li>商品B</li>
<li>商品C</li>
<li>商品D</li>
<li>商品E</li>
<li>商品F</li>
<li>商品G</li>
<li>商品H</li>
<li>商品I</li>
<li>商品J</li>
</ul>
</body>
</html>ブラウザの表示例
li:nth-child(odd)とli:nth-child(even)の両方にpadding: 8px 12px;が適用されるため、すべての行に同じ余白が付きます。そのうえで、奇数行は白、偶数行は薄いグレーの背景色になります。
この例では、複数セレクタを使うことで、共通するpaddingの指定を1か所にまとめています。もしこれを使わなければ、oddとevenの両方に同じpaddingをそれぞれ書く必要があります。
図3：複数セレクタは擬似クラスにも使える
この図から分かること
複数セレクタは、タグ名やid、classだけでなく、擬似クラスにも使えます。奇数行と偶数行のように異なる役割を持つ要素でも、共通するスタイルがあればまとめて書けます。これにより、CSSの重複を減らしながら整理されたコードにできます。
複数セレクタと上書きの関係を理解する
複数セレクタを使うと、共通のスタイルをまとめやすくなりますが、CSSではあとから書いた指定や、より具体的な指定によって上書きされることがあります。これを知っておくと、思ったとおりにスタイルが変わらないときにも落ち着いて確認できます。
たとえば、次のようなCSSを考えてみます。
h2, p {
color: #0044cc;
}
p.alert {
color: #cc0000;
}この場合、通常のpは青色ですが、class="alert"が付いたpだけは赤色になります。これは、p.alertのほうが具体的で、しかもあとに書かれているためです。
複数セレクタは、複数の要素にまったく同じスタイルを与える仕組みです。そのあとで一部だけを変えたければ、より具体的なセレクタで個別に指定すれば大丈夫です。
そのため、実際にCSSを書くときは、次の順番で考えると整理しやすくなります。
| 書く順番の考え方 | 内容 |
|---|---|
| まず共通部分 | 複数セレクタでまとめて書く |
| 次に個別部分 | 必要な要素だけ別のセレクタで上書きする |
| 最後に確認 | 意図しない上書きがないかを見る |
この流れにしておくと、CSSの重複を減らしつつ、柔軟にデザインを調整できます。
複数セレクタを使うときの考え方
複数セレクタを上手に使うためには、何をまとめられるのかを考えることが大切です。すべてを無理にまとめる必要はありませんが、同じプロパティと値を何度も書いているなら、まとめられないか見直してみるとよいです。
たとえば、見出しごとに同じ余白を付けたい、いくつかのボタンに同じ角丸を付けたい、複数の項目を同じ色にしたい、といった場面では、複数セレクタがとても役立ちます。
一方で、要素ごとに設定が大きく違う場合は、無理にまとめないほうが分かりやすいこともあります。複数セレクタは、あくまで共通部分を整理するための道具です。共通部分はまとめる、違う部分は分ける、という考え方で使うと、読みやすいCSSになっていきます。
複数セレクタを使いこなせるようになると、同じことを何度も書かずに済むようになり、CSSがすっきりしていきます。結果として、見た目の管理がしやすくなり、あとからの修正にも強いコードを書きやすくなります。