6日でできる 新HTML&CSS入門｜さまざまなCSSセレクタ
CSSセレクタを使い分ければ、デザインはもっと狙いどおりになる。
id、class、子孫セレクタ、複数セレクタを覚えて、必要な場所だけにスタイルを届けよう。
CSSを書くときに大切なのは、どのような見た目にするかだけではありません。もうひとつ、とても大切なことがあります。それは、どのHTML要素にCSSを適用するかを正しく選ぶことです。
たとえば、すべての段落の文字色を変えたい場合は、pを指定すれば済みます。しかし、ページの中には「この見出しだけ大きくしたい」「注意書きの文章だけ色を変えたい」「記事の中にある画像だけ枠線を付けたい」といった場面がたくさんあります。
このようなときに使うのがCSSセレクタです。セレクタは、CSSを適用する対象を選ぶための指定です。HTMLのタグ名で選ぶ方法だけでなく、idで1つの要素を選んだり、classで複数の要素をまとめて選んだり、特定の範囲の中にある要素だけを選んだりできます。
Web制作では、セレクタをうまく使えるようになると、HTMLの構造を保ったまま、CSSだけで見た目を細かく調整しやすくなります。この記事では、idセレクタ、classセレクタ、子孫セレクタ、複数セレクタを中心に、使い方と考え方をやわらかく整理していきます。
CSSセレクタは「どこに効かせるか」を決める指定
CSSでは、まずセレクタを書き、そのあとに波かっこの中でデザインの指定を書きます。
セレクタ {
プロパティ: 値;
}たとえば、すべての段落の文字色を青にしたい場合は、次のように書きます。
p {
color: blue;
}この場合、pがセレクタです。つまり、HTML内のすべての<p>に対して、color: blue;が適用されます。
ただし、実際のWebページでは、すべての<p>を同じ見た目にしたいとは限りません。通常の本文、注釈、重要な説明、補足情報など、段落にもいろいろな役割があります。
そこで、idやclassを使って、特定の要素だけを選べるようにします。
図1：CSSセレクタはスタイルを届ける宛先を選ぶ
この図から分かること
CSSセレクタは、スタイルを適用する相手を選ぶための指定です。タグ名で広く選ぶこともできれば、idやclassを使って特定の場所だけを選ぶこともできます。セレクタを使い分けることで、ページ全体のデザインを細かく調整しやすくなります。
idセレクタはページ内の特別な1つを選ぶ
idは、HTML要素に付ける識別名です。ページの中で特別に扱いたい要素にidを付けると、CSSからその要素を指定できます。
たとえば、メインタイトルだけに下線を付けたい場合は、HTMLでidを指定し、CSSでは#を使って選びます。
<h1 id="main-title">はじめてのCSSセレクタ</h1>
#main-title {
text-decoration: underline;
}CSSでは、id名の前に#を付けます。上の例では、id="main-title"が付いた要素にだけ、text-decoration: underline;が適用されます。
idの大きな特徴は、同じHTML文書の中で同じid名を重複させないことです。つまり、idはページ内で1つだけの要素を示す名前として使います。
| 項目 | 内容 |
|---|---|
| 書き方 | #id名 |
| HTML側の指定 | id="名前" |
| 主な用途 | ページ内で1つだけの特別な要素を選ぶ |
| 注意点 | 同じページ内で同じid名を重複させない |
idは、ページの中で特に重要な見出し、特定の領域、JavaScriptで操作したい要素などに使われることがあります。ただし、CSSの再利用性を考えると、複数の要素に同じスタイルを当てたい場合はclassのほうが向いています。
classセレクタは同じデザインを複数の要素に使える
classは、複数の要素に同じ目印を付けたいときに使います。たとえば、注釈の文章がページ内に何度も出てくる場合、すべてに同じclassを付けておくと、CSSでまとめて装飾できます。
<p class="memo">入力内容はあとから変更できます。</p>
<p class="memo">保存前に内容を確認してください。</p>
.memo {
color: #666;
font-style: italic;
}CSSでは、class名の前に.を付けます。上の例では、class="memo"が付いたすべての要素に、グレーの文字色と斜体が適用されます。
classの便利なところは、同じclass名を複数の要素に使えることです。同じデザインを何度も使いたいときに向いています。
| 項目 | 内容 |
|---|---|
| 書き方 | .class名 |
| HTML側の指定 | class="名前" |
| 主な用途 | 複数の要素に同じスタイルを適用する |
| 特徴 | 再利用しやすい |
| よく使う場面 | 注意文、ボタン、カード、ラベル、注釈など |
idは1つだけの特別な要素に使い、classは何度も使う共通デザインに使う、と考えると分かりやすいです。
idとclassを使った実践サンプル
ここでは、ページのタイトルにはidを使い、複数の説明文にはclassを使う例を見てみます。タイトルはページ内で1つだけなのでid、補足文は複数出てくるのでclassを使います。
ファイル名： lesson26_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>idとclassの使い分け</title>
<style>
#page-title {
color: #0066cc;
font-size: 220%;
border-bottom: 3px solid #0066cc;
}
.lead-text {
color: #777;
font-style: italic;
}
</style>
</head>
<body>
<h1 id="page-title">CSSセレクタの練習ページ</h1>
<p class="lead-text">このページでは、idとclassの違いを確認します。</p>
<p>ここは通常の本文です。特別なclassは付いていません。</p>
<p class="lead-text">同じclassを付けると、同じ見た目を再利用できます。</p>
</body>
</html>ブラウザの表示例
id="page-title"が付いた<h1>だけが、青色で大きく表示され、下線のような枠線が付きます。
class="lead-text"が付いた2つの<p>は、グレーの斜体になります。一方で、classが付いていない通常の<p>には、このスタイルは適用されません。
この例から、idとclassの使い分けが見えてきます。ページ内で1つだけのタイトルにはidを使い、複数の場所で使いたい説明文にはclassを使っています。
idとclassの使い分け
idとclassは、どちらもHTML要素に名前を付けてCSSから選ぶために使います。ただし、使う目的が少し違います。
| 比較項目 | id | class |
|---|---|---|
| CSSでの書き方 | #page-title | .lead-text |
| HTMLでの書き方 | id="page-title" | class="lead-text" |
| 同じ名前の使用 | 同じページ内では基本的に1回 | 複数回使える |
| 向いている用途 | ページ内で特別な1つの要素 | 共通デザインを使う複数の要素 |
| 例 | メインタイトル、特定のエリア | 注釈、ボタン、カード、ラベル |
CSSの学習を始めたばかりのうちは、idとclassの違いが少し分かりにくいかもしれません。その場合は、まず次のように考えると扱いやすいです。
ページ内で1つだけの特別なものにはidを使います。
何度も使い回したい見た目にはclassを使います。
特にWeb制作では、classを使う場面がとても多いです。デザインを部品のように再利用できるため、あとから修正しやすいCSSを書きやすくなります。
図2：idは1つ、classは複数に使える
この図から分かること
idは、ページの中で1つだけの要素を識別するときに向いています。一方、classは同じスタイルを複数の要素に使いたいときに便利です。どちらもCSSの適用先を選ぶために使いますが、役割を分けて使うことで、HTMLとCSSが整理しやすくなります。
子孫セレクタは「特定の範囲の中だけ」を選べる
子孫セレクタは、ある要素の中にある別の要素を選ぶためのセレクタです。セレクタとセレクタの間に半角スペースを入れて書きます。
たとえば、articleの中にあるimgだけに枠線を付けたい場合は、次のように書きます。
article img {
border: 3px solid #e60000;
}この指定は、articleの中にあるimgにだけ適用されます。ページ内に他のimgがあっても、それがarticleの外にある場合は対象になりません。
子孫セレクタの考え方は、「左側の要素の中にある右側の要素を選ぶ」です。
| セレクタ | 意味 |
|---|---|
| article img | articleの中にあるすべてのimg |
| nav a | navの中にあるすべてのa |
| section p | sectionの中にあるすべてのp |
| .news-list li | class="news-list"の中にあるすべてのli |
子孫セレクタを使うと、ページ全体ではなく、特定の領域の中だけにスタイルを適用できます。たとえば、通常の画像には枠線を付けず、記事本文の画像だけに枠線を付ける、といった指定ができます。
複数セレクタは同じCSSをまとめて指定できる
複数の要素に同じCSSを指定したいときは、複数セレクタを使います。セレクタをカンマで区切って並べると、複数の対象に同じスタイルを適用できます。
h2,
h3,
footer {
margin-top: 1.5em;
}この指定では、h2、h3、footerのすべてにmargin-top: 1.5em;が適用されます。
もし複数セレクタを使わない場合、次のように同じ指定を何度も書くことになります。
h2 {
margin-top: 1.5em;
}
h3 {
margin-top: 1.5em;
}
footer {
margin-top: 1.5em;
}同じ内容を何度も書くと、修正するときに手間が増えます。たとえば、余白を1.5emから2emに変更したい場合、複数箇所を直さなければなりません。
複数セレクタを使えば、共通の指定を1か所にまとめられます。CSSをすっきり書けるだけでなく、修正漏れも防ぎやすくなります。
子孫セレクタと複数セレクタを使った実践サンプル
次の例では、articleの中にある画像だけに赤い点線の枠を付けます。また、h2、h3、footerに同じ上余白をまとめて指定します。
ファイル名： lesson26_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>子孫セレクタと複数セレクタ</title>
<style>
article img {
border: 3px dotted #e60000;
}
h2,
h3,
footer {
margin-top: 1.5em;
}
img {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<h2>お知らせ</h2>
<p>このページでは、セレクタの適用範囲を確認します。</p>
<article>
<h3>制作レポート</h3>
<img src="https://picsum.photos/200/130" alt="制作風景のサンプル画像">
<p>この記事内の画像には、子孫セレクタによって枠線が付きます。</p>
</article>
<img src="https://picsum.photos/200/130?image=20" alt="記事外のサンプル画像">
<footer>© 2026 CSS Sample Site</footer>
</body>
</html>ブラウザの表示例
articleの中にある画像には、赤い点線の枠線が付きます。一方で、articleの外にある画像には、同じ枠線は付きません。
これは、article imgという子孫セレクタが、articleの中にあるimgだけを選んでいるためです。
また、h2、h3、footerには、同じ上余白が付きます。これは、h2, h3, footerという複数セレクタで、共通のCSSをまとめて指定しているためです。
子孫セレクタの半角スペースに注意する
子孫セレクタでは、セレクタ同士の間に半角スペースを入れます。この半角スペースには、「その中にある」という意味があります。
article img {
border: 3px dotted #e60000;
}これは、articleの中にあるimgを選ぶという意味です。
一方で、次のようにスペースの意味を理解せずに書くと、思ったようにCSSが効かないことがあります。
articleimg {
border: 3px dotted #e60000;
}このように続けて書いてしまうと、articleimgというタグを選ぼうとしている形になります。通常、そのようなタグは存在しないため、CSSは適用されません。
CSSセレクタでは、記号やスペースにも意味があります。特に子孫セレクタでは、半角スペースを忘れないようにしましょう。
複数セレクタのカンマに注意する
複数セレクタでは、対象をカンマで区切ります。
h2,
h3,
footer {
margin-top: 1.5em;
}この指定は、h2とh3とfooterのすべてを選びます。
カンマを忘れて次のように書くと、意味が変わります。
h2 h3 footer {
margin-top: 1.5em;
}この場合は、h2の中にあるh3の中にあるfooterを選ぶ、というかなり限定的な指定になります。通常のHTML構造では、そのような形になっていないことが多いため、CSSが効かない原因になります。
カンマは「これも、これも、これも選ぶ」という意味です。半角スペースは「その中にあるものを選ぶ」という意味です。この違いを覚えておくと、セレクタのミスを減らせます。
図3：半角スペースとカンマでは意味が変わる
この図から分かること
CSSセレクタでは、半角スペースとカンマで意味が大きく変わります。半角スペースは、特定の要素の中にある要素を選ぶときに使います。カンマは、複数の要素をまとめて選ぶときに使います。この違いを理解すると、CSSがどこに効くのかを予測しやすくなります。
主なCSSセレクタの一覧
ここまでに見てきたセレクタを整理すると、次のようになります。
| カテゴリ | 記号 | 書き方の例 | 適用される範囲 |
|---|---|---|---|
| idセレクタ | # | #logo | 指定したidを持つ1つの要素 |
| classセレクタ | . | .alert | 指定したclassを持つ複数の要素 |
| タイプセレクタ | なし | nav | 指定したタグ名の要素 |
| 子孫セレクタ | 半角スペース | ul li | 左側の要素の中にある右側の要素 |
| 複数セレクタ | , | h1, h2 | カンマで列挙したすべての要素 |
タイプセレクタは、タグ名で要素を選ぶ基本的なセレクタです。たとえば、pと書けばすべての<p>、h1と書けばすべての<h1>が対象になります。
idセレクタとclassセレクタは、HTML側にid属性やclass属性を付けて使います。特定の要素を選びたいときはid、複数の要素に同じスタイルを使いたいときはclassが便利です。
子孫セレクタは、HTMLの構造を利用して対象を絞り込む方法です。特定の領域の中にある要素だけを装飾したいときに役立ちます。
複数セレクタは、同じCSSをいくつかの要素にまとめて適用したいときに使います。同じ指定を何度も書かずに済むため、CSSを整理しやすくなります。
セレクタを組み合わせると細かい指定ができる
CSSセレクタは、単独で使うだけでなく、組み合わせて使うこともできます。
たとえば、class="news"が付いた領域の中にある<p>だけを選びたい場合は、次のように書けます。
.news p {
line-height: 1.8;
}これは、class="news"の中にある<p>だけに行間を指定する書き方です。ページ全体の<p>には影響しません。
また、複数のclassに同じスタイルを当てたい場合は、カンマでまとめることができます。
.info,
.warning,
.success {
padding: 12px;
}このように、セレクタを組み合わせると、必要な場所だけにCSSを効かせられます。CSSの量を増やしすぎず、分かりやすく管理するためにも、セレクタの使い分けはとても大切です。
CSSセレクタを学ぶときの考え方
CSSセレクタを学ぶときは、最初からすべてを暗記しようとしなくても大丈夫です。まずは、次の流れで考えると理解しやすくなります。
| 目的 | 使いやすいセレクタ |
|---|---|
| すべての同じタグにCSSを当てたい | タイプセレクタ |
| ページ内で1つだけの要素にCSSを当てたい | idセレクタ |
| 複数の要素に同じCSSを当てたい | classセレクタ |
| 特定の範囲内にある要素だけ選びたい | 子孫セレクタ |
| 複数の要素に同じ指定をまとめたい | 複数セレクタ |
たとえば、ページ全体の段落を整えたいならpを使います。注意文だけ色を変えたいならclassを使います。ページ内のメインタイトルだけ特別にしたいならidを使います。記事の中の画像だけ装飾したいなら子孫セレクタを使います。
このように、「どこにCSSを効かせたいのか」を先に考えると、どのセレクタを使えばよいのか判断しやすくなります。
CSSは、見た目を指定する言語であると同時に、対象を選ぶ力が大切な言語です。セレクタを使い分けられるようになると、HTMLを必要以上に書き換えなくても、CSSだけでページの印象や読みやすさを細かく調整できるようになります。
必要でしたら、同じ文調で「擬似クラスセレクタ」「属性セレクタ」「子セレクタ」「隣接セレクタ」まで続けて解説できます。