CSSセレクタ完全ガイド｜基本から応用までの使い方と優先順位

ながみえ

HTML/CSSレッスン2-☆1『セレクタの完全ガイド｜優先順位と階層構造を理解しよう』記事用アイキャッチ画像

Lesson2-4では以下の4つの基本的なセレクタを学びました。

要素セレクタ (p, div など) → HTMLタグを指定する
クラスセレクタ (.class-name) → 複数の要素に適用できる
IDセレクタ (#id-name) → 一意の要素に適用する
疑似クラス (:hover, :focus など) → ユーザーのアクションに応じたスタイル変更

これらのセレクタを使うことで、 HTMLの特定の要素に対してスタイルを適用できるようになりました。

しかし、CSSにはまだ紹介しきれていない強力なセレクタが存在します。

例えば、次のような疑問を持ったことはありませんか？

「ページ内のすべての要素を一括でスタイル適用する方法は？」
「特定の属性を持つ要素だけを狙ってデザインする方法は？」
「HTMLには存在しない要素をCSSで追加できるって本当？」

これらを解決するために、新しく 「全称セレクタ」「属性セレクタ」「疑似要素」 を学びます！

さらに、セレクタをより使いこなすための知識として階層構造とセレクタの優先順位についても見ていきましょう。

Lesson１：HTML入門編
Lesson２：CSS入門編
　・Lesson2-1：CSS学習の入り口｜文字に色を付けよう
　・Lesson2-2：CSSを読み込む３つの方法
　・Lesson2-3：テキストスタイルを変更しよう
　・Lesson2-4：４種類のセレクタを使いこなそう
　・Lesson2-5：ボックスモデルを理解しよう
　・Lesson2-6：ボックススタイルを変更しよう
　・Lesson2-7：継承とカスケードを理解しよう
　・Lesson2-☆1：セレクタの階層構造と優先順位を理解しよう ◁今回はココ
　・Lesson2-☆2：Webサイトの配色をマスターしよう
Lesson３：CSS応用編

この記事では、以下の3点について詳しく解説します。

７種類のセレクタの完全ガイド
HTMLの階層構造の解説
セレクタの優先順位

<<前のページ

HTML/CSSレッスン2-7『継承とカスケードを理解しよう』記事用アイキャッチ画像

HTML/CSSの記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン2-☆2『色の心理学とCSSカラーデザイン術｜Webサイトの配色をマスターしよう』記事用アイキャッチ画像

セレクタを使いこなそう！

CSSでは、HTMLの要素を「セレクタ」を使って指定し、スタイルを適用します。

Lesson2-4では要素セレクタ・クラスセレクタ・IDセレクタ・疑似クラスを学びましたが、今回はさらに便利なセレクタを学んで、より柔軟なデザインを可能にしましょう！

今回のテーマは 「復習しながら、新しいセレクタを習得すること」 です。
それでは、順番に解説していきます！

【CSS】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

全称セレクタ（`*`）

全称セレクタ（*）は、ページ内のすべての要素にスタイルを適用できます。

例えば、「すべての要素の余白をなくしたい」ときに役立ちます！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

すべての要素の margin（余白）と padding（内側の余白）を 0 に設定
box-sizing: border-box; で、要素のサイズ計算をわかりやすくする
全称セレクタはすべての要素に適用されるため、適用範囲が広すぎるとパフォーマンスに影響することも。
「基本のスタイルを統一する」ために使うのがベスト！

コードを書いてみよう

次のHTMLがあります。

全称セレクタ（*）を使って、ページ内のすべての要素の文字の色を青 (blue) にするCSSを記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全称セレクタの練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
    <button>ボタン</button>
</body>
</html>

【復習】要素セレクタ (`div`, `p` など)

要素セレクタはHTMLの特定のタグ（要素）を対象にするセレクタです。

p {
  font-size: 16px;
  color: #333;
}

すべての <p> 要素に適用される
要素セレクタは基本的だが柔軟性に欠けるので、次に紹介するクラスセレクタと組み合わせて使うのが推奨される

【復習】クラスセレクタ (`.class-name`)

クラスセレクタは汎用的に使えるセレクタで、複数の要素に適用できます。

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

「ボタン」デザインを .button クラスに適用
<button> だけでなく、<a> や <div> などにも使える
再利用しやすいため、クラスセレクタは頻繁に使われる
IDセレクタと違い、同じクラスを複数の要素に適用できる

【復習】IDセレクタ (`#id-name`)

IDセレクタはページ内の 1つの要素だけに適用するセレクタです。

#header {
  background-color: black;
  color: white;
}

id="header" を持つ要素だけに適用される
他の要素には適用できない（クラスセレクタとの相違点）
IDは1つのページで1回だけ使う
多用するとCSSの管理が難しくなるため、基本はクラスセレクタを使うべき

属性セレクタ (`[type="text"]`, `[href^="https"]` など)

属性セレクタは特定の属性を持つ要素に適用できるセレクタです。以下のように適用させたい属性を[]で囲って使用します。

input[type="text"] {
  border: 1px solid gray;
}

a[href^="https"] {
  color: blue;
}

上のセレクタは<input type="text"> だけに適用される
下のセレクタはhref が https から始まるリンクだけに適用
属性セレクタを使えば、より細かくスタイルを指定できる！

コードを書いてみよう

次のHTMLに対してtype="password" の <input> 要素だけに適用されるCSS を記述してください。
（input[type="password"] を使ってみましょう。）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性セレクタの練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" placeholder="ユーザー名">
    <input type="password" placeholder="パスワード">
</body>
</html>

【一部復習】疑似クラス (`:hover`, `:focus`, `:nth-child()` など)

疑似クラスはユーザーのアクションに応じて変化するセレクタです。

a:hover {
  color: red;
}

input:focus {
  border: 2px solid blue;
}

li:nth-child(odd) {
  background-color: lightgray;
}

:hover → マウスが乗ったときに色を変える
:focus → フォームのフォーカス時のスタイルを変更
:nth-child(odd) → 奇数番目のリストアイテムだけに適用
リストの奇数・偶数ごとに色を変えるデザインなどに使える！

コードを書いてみよう

次のHTMLに対して、リストの偶数番目の項目 (2番目, 4番目, 6番目...) の背景色を lightgray にするCSS を記述してください。
（:nth-child(even) を使ってみましょう。）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疑似クラスの練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li>りんご</li>
        <li>バナナ</li>
        <li>みかん</li>
        <li>ぶどう</li>
        <li>なし</li>
        <li>すいか</li>
    </ul>
</body>
</html>

疑似要素 (`::before`, `::after` など)

疑似要素はHTMLにない要素を「疑似的」に作成するセレクタです。

.quote::before {
  content: "“";
  font-size: 24px;
  color: gray;
}

.quote::after {
  content: "”";
  font-size: 24px;
  color: gray;
}

::before や ::after を使って、補足的なデザインを追加
HTMLには存在しない要素を、CSSだけで作れる
アイコンや装飾の追加に便利！

コードを書いてみよう

次のHTMLに対して、::before 疑似要素を使い、すべての <p> の前に「 📢注意: 」というテキストを追加するCSS を記述してください。
（content プロパティを使いましょう。）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疑似要素の練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>これは重要なメッセージです。</p>
    <p>もう一つのメッセージです。</p>
</body>
</html>

次の章では、HTMLの階層構想について詳しく解説していきます。

HTMLの階層構造の解説

CSSのセレクタをより効果的に使うためには、HTMLの階層構造を理解することが重要です。

親要素・子要素・孫要素・兄弟要素など、要素間の関係を正しく把握することで、より柔軟なスタイル指定が可能になります。

この章では、階層構造を活用するためのセレクタの使い方を詳しく解説します。

HTMLの階層構造とは？

HTMLはツリー構造になっており、各要素は親・子・兄弟といった関係を持ちます。

例えば、次のHTMLを考えてみましょう。

<div class="container">
  <h2>タイトル</h2>
  <p>この文章は段落です。</p>
  <div class="content">
    <p>この段落はコンテンツ内にあります。</p>
  </div>
</div>

このHTMLでは、以下のような関係が成り立っています。

<div class="container"> は親要素
<h2>、<p>、<div class="content"> は子要素
<div class="content"> の中にある <p> は孫要素
<h2> と <p> は兄弟要素

このような階層構造を理解することで、適切なCSSセレクタを使い分けることができます。

親子関係のセレクタ

子セレクタ（`>`）

親要素（<div class="container">）の直下にある子要素だけを指定する場合は > を使います。

.container > p {
  color: blue;
}

この指定では.container の直下にある <p> だけが青色になります。.container の中の .content にある <p> には適用されません。

子孫セレクタ（空白）

空白を使うと、親要素の中にあるすべての子孫要素を対象にできます。

.container p {
  color: blue;
}

この場合、.container 内のすべての <p> に青色が適用されます。
つまり .content 内の <p> にも適用されることになります。

兄弟関係のセレクタ

兄弟要素を指定する場合、隣接しているかどうかによって使い分けます。

隣接兄弟セレクタ（`+`）

ある要素の直後にある兄弟要素を指定する場合に使います。

h2 + p {
  color: red;
}

この指定では<h2> のすぐ後ろにある <p> だけが赤色になります。
間に他の要素がある場合、その <p> には適用されません。

一般兄弟セレクタ（`~`）

同じ親要素の中にある後続の兄弟要素すべてを対象にします。

h2 ~ p {
  color: green;
}

この場合、<h2> の後に出てくる すべての <p> が緑色になります。
間に他の要素があっても適用されるのが特徴です。

より具体的な指定をするための工夫

複数のセレクタを組み合わせることで、より細かくデザインを調整できます。

特定の子要素のみを指定

例えば.content 内の <p> だけをターゲットにする場合は次のように書きます。

.content > p {
  font-weight: bold;
}

これにより.container 内の <p> には影響を与えず、.content 内の <p> のみが太字になります。

兄弟要素の関係を意識したデザイン

例えばすべての <h2> の後にある <p> にスタイルを適用したい場合は ~ を使います。

h2 ~ p {
  font-style: italic;
}

こうすることで<h2>の後に続く段落がすべて斜体になります。

コードを書いてみよう

次のHTMLに対して、空白（）を使って、.container 内にあるすべての <p> の文字色を青 (blue) にするCSS を記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>階層構造の練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <p>この段落1（青色になる）</p>
        <div class="inner">
            <p>この段落2（青色になる）</p>
            <div class="sub-inner">
                <p>この段落3（青色になる）</p>
            </div>
        </div>
    </div>
</body>
</html>

まとめ

> は直下の子要素だけに適用
空白（）を使うと子孫要素すべてに適用
+ は直後の兄弟要素に適用
~ は後続の兄弟要素すべてに適用
セレクタを組み合わせることで、より柔軟な指定が可能になる

階層構造を理解して適切なセレクタを使い分けることで、CSSの記述がより簡潔になり、意図通りのデザインを適用しやすくなります。

セレクタの優先順位

CSSでは、複数のセレクタが同じ要素に適用されることが起こりえます。

その場合、どのスタイルが優先されるかを理解しておかないと、意図しないデザインになってしまうかもしれません。

この章では、セレクタの優先順位のルールについて解説し、どのスタイルが適用されるのかを明確にしていきます。

セレクタの優先順位とは？

同じ要素に対して異なるセレクタでスタイルが指定された場合、どのルールが適用されるかを決める仕組みを「セレクタの優先順位」といいます。

CSSの優先順位は、次のルールに従います。

セレクタの種類	優先度の数値（スコア）
`!important` の指定	最優先（どんな場合でも適用）
IDセレクタ (`#id`)	100
クラスセレクタ (`.class`) 属性セレクタ (`[type="text"]`) 疑似クラス (`:hover` など)	10
要素セレクタ (`p`, `div` など)	1
全称セレクタ (`*`)	0

例えば、次のようなCSSがあったとします。

p {
  color: blue;
}

p.special {
  color: red;
}

#unique {
  color: green;
}

そして、次のHTMLがあるとします。

<p id="unique" class="special">このテキストの色は何色？</p>

この場合、p に対して 3つの異なるセレクタが適用されていますが、実際に表示されるテキストの色は緑色（#unique）になります。

これは、IDセレクタの優先順位が最も高いためです。

`!important` の使い方と注意点

!important を使うと、どんなセレクタよりも優先されます。

p {
  color: black !important;
}

しかし!important を多用すると CSSの管理が難しくなる ため、基本的には 使わないのが理想 です。

まとめ

優先順位は「ID > クラス・疑似クラス > 要素 > 全称セレクタ」の順で決まる
詳細なセレクタほど優先度が高くなる
!important は最優先だが、多用しすぎるとCSSの管理が難しくなる
競合を防ぐために、できるだけクラスセレクタを適切に使う

優先順位を正しく理解し、適切なセレクタを選ぶことで、スタイルの意図しない上書きを防ぎ、管理しやすいCSSを書けるようになります。

コードを書いてみよう

次のHTMLに対して、適用されるスタイルを考えてみましょう。
この <p> の最終的な文字色は何色になりますか？

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>セレクタの優先順位の練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p id="unique" class="highlight">このテキストの色は？</p>
</body>
</html>

p {
    color: blue;
}

.highlight {
    color: red;
}

#unique {
    color: green;
}

まとめ

CSSのセレクタは適切に使い分けることで効率的にスタイルを適用できる強力なツールです。

このレッスンでは、基本的なセレクタの復習と、新しいセレクタの活用方法を学びました。

セレクタを適切に使いこなすことで、より整理された、メンテナンスしやすいCSS を書くことができます。

これからも実際に手を動かしてコードを書きながら、学んだことを活用していきましょう！

もっと分かりやすい学習サイトにするために

この記事を読んで「ここが分かりにくかった」「ここが難しかった」等の意見を募集しています。

世界一わかりやすいHTML/CSS学習サイトにするため、ぜひ問い合わせフォームからご意見下さい。

<<前のページ

HTML/CSSの記事一覧

次のページ>>

初めてのWebサイトを作ろう2-☆1

このサイトの Lesson1-1（HTML学習の入り口）かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Webサイト制作に挑戦する人はここをクリック！

自分だけのWebサイト制作にはベースとなる基本セットが必要になります。

まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。

Lesson2-☆1のまとめノートを追加しよう

下記のHTMLコードは、このLesson2-1で紹介した内容を端的にまとめてブラウザ表示するためのコードです。

これをコピーして「MyWebsite2-1.html」という名前で保存し、「lesson2（学習フォルダ）」の中に保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson2-☆1</title>
    <link rel="stylesheet" href="style/styles-lesson2.css">
</head>
<body>

    <h1>Lesson2-☆1：セレクタの完全ガイド</h1>

    <div class="container">
        <h2>目的・要点</h2>
        <p>
            CSSのセレクタには、基本の4種類（要素セレクタ、クラスセレクタ、IDセレクタ、疑似クラス）だけでなく、より高度なセレクタが存在します。
            本レッスンでは、全称セレクタ、属性セレクタ、疑似要素を中心に学び、
            さらに階層構造やセレクタの優先順位を理解することで、より効率的なスタイリングを行うスキルを習得することを目的とします。
        </p>

        <h2>本レッスンの到達目標</h2>
        <ul>
            <li>CSSのセレクタを適切に使い分け、無駄なく管理しやすいスタイルを設計できるようになる。</li>
        </ul>

        <h2>このレッスンで学習した内容</h2>

        <h3>全称セレクタ（*）</h3>
        <ul>
            <li>すべての要素に適用可能。</li>
            <li>例: <code>* { margin: 0; padding: 0; }</code>（全要素の余白をリセット）。</li>
            <li>使いすぎるとパフォーマンスに影響するため注意。</li>
        </ul>

        <h3>属性セレクタ</h3>
        <ul>
            <li>特定の属性を持つ要素を対象にできる。</li>
            <li>例: <code>input[type="text"] { border: 1px solid gray; }</code>（テキストボックスだけに適用）。</li>
            <li>より細かい指定が可能で、特定の条件に合った要素にスタイルを適用できる。</li>
        </ul>

        <h3>疑似クラスと疑似要素</h3>
        <ul>
            <li><strong>疑似クラス</strong>（<code>:hover</code>, <code>:focus</code>, <code>:nth-child</code>）</li>
            <ul>
                <li><code>a:hover { color: red; }</code>（マウスオーバー時に色を変える）。</li>
                <li><code>input:focus { border: 2px solid blue; }</code>（フォーカス時のスタイル変更）。</li>
                <li><code>li:nth-child(odd) { background-color: lightgray; }</code>（リストの奇数番目だけ背景色を変更）。</li>
            </ul>
            <li><strong>疑似要素</strong>（<code>::before</code>, <code>::after</code>）</li>
            <ul>
                <li><code>p::before { content: "📢注意: "; }</code>（パラグラフの前にアイコンを追加）。</li>
                <li>CSSだけでHTMLには存在しない要素を追加できる。</li>
            </ul>
        </ul>

        <h2>HTMLの階層構造とセレクタの関係</h2>
        <ul>
            <li><strong>子セレクタ（>）</strong>: 直下の子要素のみ指定。</li>
            <li><strong>子孫セレクタ（空白）</strong>: 内部のすべての子要素を対象。</li>
            <li><strong>隣接兄弟セレクタ（+）</strong>: 直後の兄弟要素のみ指定。</li>
            <li><strong>一般兄弟セレクタ（~）</strong>: 後続のすべての兄弟要素を指定。</li>
        </ul>

        <h2>セレクタの優先順位（Specificity）</h2>
        <ul>
            <li><strong>!important 指定（最優先）</strong></li>
            <li><strong>IDセレクタ（#id）</strong></li>
            <li><strong>クラス・属性・疑似クラスセレクタ（.class, [type="text"], :hover）</strong></li>
            <li><strong>要素セレクタ（p, div など）</strong></li>
            <li><strong>全称セレクタ（*）</strong></li>
        </ul>

        <h2>まとめ</h2>
        <p>
            本レッスンでは、CSSのセレクタをより深く学び、スタイルの適用範囲を柔軟に管理する方法を習得しました。
        </p>
        <ul>
            <li>全称セレクタでページ全体の基本スタイルをリセット</li>
            <li>属性セレクタで特定の要素にピンポイントでスタイル適用</li>
            <li>疑似クラス・疑似要素を活用し、動的なデザインを実現</li>
            <li>親子・兄弟セレクタを使い、HTMLの階層を意識したスタイリングを行う</li>
            <li>セレクタの優先順位を理解し、適切なスタイル設計をする</li>
        </ul>
        <p>
            これらの知識を活かし、より効率的で保守性の高いCSSを書くことを目指しましょう！
        </p>
        <p><a href="../MyWebsite.html">トップページへ戻る</a></p>
    </div>

    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>

</body>
</html>

これでLesson2-☆1の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

セレクタを使いこなそう！

全称セレクタ（*）

【復習】要素セレクタ (div, p など)

【復習】クラスセレクタ (.class-name)

【復習】IDセレクタ (#id-name)

属性セレクタ ([type="text"], [href^="https"] など)

【一部復習】疑似クラス (:hover, :focus, :nth-child() など)

疑似要素 (::before, ::after など)

HTMLの階層構造の解説

HTMLの階層構造とは？

親子関係のセレクタ

子セレクタ（>）

子孫セレクタ（空白）

兄弟関係のセレクタ

隣接兄弟セレクタ（+）

一般兄弟セレクタ（~）

より具体的な指定をするための工夫

特定の子要素のみを指定

兄弟要素の関係を意識したデザイン

まとめ

セレクタの優先順位

セレクタの優先順位とは？

!important の使い方と注意点

まとめ

まとめ

初めてのWebサイトを作ろう2-☆1

Lesson2-☆1のまとめノートを追加しよう

全称セレクタ（`*`）

【復習】要素セレクタ (`div`, `p` など)

【復習】クラスセレクタ (`.class-name`)

【復習】IDセレクタ (`#id-name`)

属性セレクタ (`[type="text"]`, `[href^="https"]` など)

【一部復習】疑似クラス (`:hover`, `:focus`, `:nth-child()` など)

疑似要素 (`::before`, `::after` など)

子セレクタ（`>`）

隣接兄弟セレクタ（`+`）

一般兄弟セレクタ（`~`）

`!important` の使い方と注意点