はじめに

CSSでスタイルを適用するには、まず「どの要素に適用するか」を指定する必要があります。この「要素を選択するためのパターン」がCSSセレクタです。

CSSセレクタを正しく理解することで、HTMLドキュメント内の任意の要素を正確に選択し、意図したスタイルを適用できるようになります。本記事では、CSSセレクタの基本から実践的な組み合わせまで、以下の内容を解説します。

  • 基本セレクタ（要素セレクタ・クラスセレクタ・IDセレクタ）
  • ユニバーサルセレクタ（全称セレクタ）
  • 属性セレクタ
  • セレクタの組み合わせ（結合子）

前提条件

本記事を読み進めるにあたり、以下の知識があることを前提としています。

  • HTMLの基本的なタグ構造（div、span、p、heading など）
  • CSSの基本構文（セレクタ・プロパティ・値の関係）
  • 外部スタイルシートの読み込み方法

動作確認環境

  • Google Chrome 131以降
  • Firefox 133以降
  • Safari 18以降
  • Microsoft Edge 131以降

本記事で紹介するすべてのセレクタは、現在の主要ブラウザで完全にサポートされています。

CSSセレクタとは

CSSセレクタとは、スタイルを適用する対象の要素を指定するためのパターンです。MDN Web Docsでは次のように説明されています。

CSS では、セレクターはスタイルを設定したい要素と照合、または選択するために使用されるパターンです。

CSSセレクタは、CSSルールの先頭に記述し、続く宣言ブロック内のスタイルがどの要素に適用されるかを決定します。

1
2
3
4

/* セレクタ { プロパティ: 値; } */
p {
  color: blue;
}

上記の例では、pがセレクタであり、すべての<p>要素に対して文字色を青にするスタイルが適用されます。

基本セレクタの種類と使い方

CSSセレクタの中で最も基本的なものが、要素セレクタ・クラスセレクタ・IDセレクタの3種類です。これらを正しく使い分けることが、効率的なCSS設計の第一歩となります。

要素セレクタ（タイプセレクタ）

要素セレクタは、HTMLのタグ名をそのまま指定して、該当するすべての要素を選択するセレクタです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* すべてのh1要素を選択 */
h1 {
  font-size: 2rem;
  color: #333;
}

/* すべてのp要素を選択 */
p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* すべてのa要素を選択 */
a {
  color: #0066cc;
  text-decoration: none;
}

要素セレクタは最もシンプルなセレクタですが、ページ内のすべての該当要素に適用されるため、使用には注意が必要です。グローバルなベーススタイルを定義する場合に適しています。

適用結果の例：

1
2
3

<h1>見出しテキスト</h1>
<p>段落テキストです。line-heightが1.8に設定されます。</p>
<a href="#">リンクテキスト</a>

上記のHTMLに対して前述のCSSを適用すると、h1要素は2remのフォントサイズ、p要素は1.8の行間、a要素は青色でアンダーラインなしのスタイルが適用されます。

クラスセレクタ

クラスセレクタは、HTML要素のclass属性に指定された値を使って要素を選択します。ドット（.）に続けてクラス名を記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* class="button"を持つ要素を選択 */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

/* class="text-center"を持つ要素を選択 */
.text-center {
  text-align: center;
}

/* class="mt-20"を持つ要素を選択 */
.mt-20 {
  margin-top: 20px;
}

クラスセレクタの最大の特徴は、同じクラスを複数の要素に適用できることです。これにより、スタイルの再利用性が高まります。

1
2
3

<button class="button">送信する</button>
<a href="#" class="button">詳細を見る</a>
<div class="button">カスタムボタン</div>

上記のように、異なるHTML要素でも同じ.buttonクラスを適用すれば、統一されたボタンスタイルが適用されます。

また、1つの要素に複数のクラスを指定することも可能です。

1

<p class="text-center mt-20">中央揃えで上マージン20pxの段落</p>

IDセレクタ

IDセレクタは、HTML要素のid属性に指定された値を使って要素を選択します。シャープ（#）に続けてID名を記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* id="header"を持つ要素を選択 */
#header {
  background-color: #f8f9fa;
  padding: 20px;
  border-bottom: 1px solid #dee2e6;
}

/* id="main-content"を持つ要素を選択 */
#main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* id="footer"を持つ要素を選択 */
#footer {
  background-color: #343a40;
  color: white;
  padding: 30px;
  text-align: center;
}

IDセレクタの特徴は、1つのHTMLドキュメント内で同じIDは1つの要素にしか使用できないことです。これはHTMLの仕様で定められています。

1
2
3

<header id="header">ヘッダー領域</header>
<main id="main-content">メインコンテンツ</main>
<footer id="footer">フッター領域</footer>

クラスセレクタとIDセレクタの使い分け：

特性 クラスセレクタ IDセレクタ
記法 .classname #idname
適用可能数 複数要素に適用可 1ページに1要素のみ
詳細度 低い（0,1,0） 高い（1,0,0）
用途 再利用可能なスタイル ページ内で一意な要素

現在のCSS設計では、詳細度の管理しやすさからクラスセレクタを中心に使用し、IDセレクタはJavaScriptからの参照やページ内リンクのアンカーなど、特定の用途に限定することが推奨されています。

ユニバーサルセレクタ（全称セレクタ）

ユニバーサルセレクタは、アスタリスク（*）で表記し、すべての要素を選択するセレクタです。

1
2
3
4
5
6

/* すべての要素を選択 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ユニバーサルセレクタの主な用途

ユニバーサルセレクタは、以下のような場面で使用されます。

1. CSSリセットの一部として

ブラウザのデフォルトスタイルをリセットする際に使用されます。

1
2
3
4
5

*,
*::before,
*::after {
  box-sizing: border-box;
}

この記述により、すべての要素と疑似要素に対してbox-sizing: border-boxが適用され、paddingとborderを含めたサイズ計算が行われるようになります。

2. 特定の親要素内のすべての子要素を選択

1
2
3
4

/* .container内のすべての子要素 */
.container * {
  font-family: 'Noto Sans JP', sans-serif;
}

注意点： ユニバーサルセレクタは非常に広範囲に適用されるため、パフォーマンスへの影響を考慮し、必要最小限の使用にとどめることが推奨されます。

属性セレクタ

属性セレクタは、HTML要素の属性やその値に基づいて要素を選択するセレクタです。角括弧（[]）内に条件を記述します。

属性の存在による選択

特定の属性を持つ要素を選択します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* title属性を持つすべてのa要素 */
a[title] {
  border-bottom: 1px dotted currentColor;
}

/* disabled属性を持つすべてのinput要素 */
input[disabled] {
  background-color: #e9ecef;
  cursor: not-allowed;
}

1
2
3
4
5

<a href="#" title="ホームへ戻る">ホーム</a>
<a href="#">リンク（titleなし）</a>

<input type="text" value="編集可能">
<input type="text" value="編集不可" disabled>

属性値の完全一致

属性値が指定した値と完全に一致する要素を選択します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* type="submit"のinput要素 */
input[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* type="text"のinput要素 */
input[type="text"] {
  border: 1px solid #ced4da;
  padding: 8px 12px;
  border-radius: 4px;
}

属性値の部分一致

属性セレクタでは、値の部分一致による柔軟な選択も可能です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* hrefが"https://"で始まるリンク（外部リンク） */
a[href^="https://"] {
  padding-right: 20px;
  background: url('external-link-icon.svg') right center no-repeat;
}

/* hrefが".pdf"で終わるリンク（PDFファイル） */
a[href$=".pdf"] {
  padding-left: 20px;
  background: url('pdf-icon.svg') left center no-repeat;
}

/* hrefに"example"を含むリンク */
a[href*="example"] {
  color: #6f42c1;
}

/* class属性に"btn"という単語を含む要素（空白区切り） */
[class~="btn"] {
  display: inline-block;
  font-weight: bold;
}

/* lang属性が"en"または"en-"で始まる要素 */
[lang|="en"] {
  quotes: '"' '"' "'" "'";
}

属性セレクタの部分一致パターン一覧：

構文 説明 例
[attr] 属性が存在する a[title]
[attr="value"] 完全一致 input[type="text"]
[attr~="value"] 空白区切りリスト内に含まれる [class~="btn"]
[attr|="value"] 値と一致、または値で始まりハイフンが続く [lang|="en"]
[attr^="value"] 値で始まる（前方一致） a[href^="https://"]
[attr$="value"] 値で終わる（後方一致） a[href$=".pdf"]
[attr*="value"] 値を含む（部分一致） a[href*="example"]

大文字小文字の区別

属性セレクタでは、大文字小文字の区別を制御する修飾子を使用できます。

1
2
3
4
5
6
7
8
9

/* 大文字小文字を区別しない（i修飾子） */
a[href$=".PDF" i] {
  color: red;
}

/* 大文字小文字を区別する（s修飾子） */
a[href$=".pdf" s] {
  color: blue;
}

i修飾子はすべての主要ブラウザでサポートされていますが、s修飾子はFirefoxでのみサポートされています（2026年1月現在）。

セレクタの組み合わせ（結合子）

複数のセレクタを組み合わせることで、より具体的に要素を選択できます。この組み合わせに使用する記号を「結合子（コンビネーター）」と呼びます。

子孫結合子（スペース）

子孫結合子は、ある要素の子孫（子、孫、ひ孫など）にあたる要素を選択します。2つのセレクタを空白（スペース）で区切って記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* .container内のすべてのp要素（子孫すべて） */
.container p {
  color: #333;
  line-height: 1.6;
}

/* nav内のすべてのa要素 */
nav a {
  text-decoration: none;
  padding: 10px 15px;
}

/* .card内の.title要素 */
.card .title {
  font-size: 1.25rem;
  font-weight: bold;
}

1
2
3
4
5
6
7
8
9

<div class="container">
  <p>直接の子要素（選択される）</p>
  <div>
    <p>孫要素（選択される）</p>
    <section>
      <p>ひ孫要素（選択される）</p>
    </section>
  </div>
</div>

上記の例では、.container内のすべての<p>要素（深さに関係なく）が選択されます。

子結合子（>）

子結合子は、ある要素の直接の子要素のみを選択します。大なり記号（>）で区切って記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* .menu直下のli要素のみ */
.menu > li {
  display: inline-block;
  margin-right: 20px;
}

/* .card直下のh2要素のみ */
.card > h2 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #007bff;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<ul class="menu">
  <li>項目1（選択される）</li>
  <li>項目2（選択される）
    <ul>
      <li>サブ項目A（選択されない）</li>
      <li>サブ項目B（選択されない）</li>
    </ul>
  </li>
  <li>項目3（選択される）</li>
</ul>

子孫結合子との違いを図で示します。

graph TD
    A[.menu] --> B[li 選択される]
    A --> C[li 選択される]
    C --> D[ul]
    D --> E[li 選択されない]
    D --> F[li 選択されない]
    
    style B fill:#28a745,color:#fff
    style C fill:#28a745,color:#fff
    style E fill:#dc3545,color:#fff
    style F fill:#dc3545,color:#fff

隣接兄弟結合子（+）

隣接兄弟結合子は、指定した要素の直後に隣接する兄弟要素を選択します。プラス記号（+）で区切って記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* h2の直後にあるp要素 */
h2 + p {
  font-size: 1.1rem;
  color: #666;
  margin-top: 0;
}

/* input直後のlabel要素 */
input + label {
  margin-left: 5px;
}

1
2
3

<h2>セクション見出し</h2>
<p>この段落は選択される（h2の直後）</p>
<p>この段落は選択されない（h2の直後ではない）</p>

後続兄弟結合子（~）

後続兄弟結合子は、指定した要素より後に出現するすべての兄弟要素を選択します。チルダ（~）で区切って記述します。

1
2
3
4
5
6
7
8
9

/* h2より後にあるすべての兄弟p要素 */
h2 ~ p {
  margin-left: 20px;
}

/* .activeより後にあるすべての兄弟li要素 */
.active ~ li {
  opacity: 0.5;
}

1
2
3
4
5

<h2>セクション見出し</h2>
<p>この段落は選択される</p>
<div>divは選択されない</div>
<p>この段落も選択される</p>
<p>この段落も選択される</p>

結合子の比較表：

結合子 記法 選択対象 例
子孫 A B Aの子孫すべてのB nav a
子 A > B Aの直接の子のB .menu > li
隣接兄弟 A + B Aの直後の兄弟B h2 + p
後続兄弟 A ~ B Aより後のすべての兄弟B h2 ~ p

セレクタの複合利用

実際の開発では、複数のセレクタを組み合わせて使用することが一般的です。

セレクタの連結

同じ要素に対して複数の条件を指定する場合、セレクタを空白なしで連結します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* div要素かつclass="container"を持つ要素 */
div.container {
  max-width: 1200px;
}

/* input要素かつtype="text"かつclass="form-control"を持つ要素 */
input[type="text"].form-control {
  width: 100%;
}

/* p要素かつclass="lead"かつclass="text-center"を持つ要素 */
p.lead.text-center {
  font-size: 1.25rem;
  text-align: center;
}

セレクタリスト（グループ化）

複数のセレクタに同じスタイルを適用する場合、カンマ（,）で区切ってグループ化できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* h1, h2, h3に同じスタイルを適用 */
h1,
h2,
h3 {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  line-height: 1.4;
}

/* 複数のフォーム要素に共通スタイルを適用 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 8px 12px;
}

複雑なセレクタの例

実践的なCSSでは、これらを組み合わせた複雑なセレクタを使用することがあります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* ナビゲーション内のリンクにホバーしたとき */
.main-nav > ul > li > a:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

/* カード内の最初の段落 */
.card > .card-body > p:first-child {
  font-weight: bold;
}

/* フォーム内の必須入力フィールド */
.form-group input[required] {
  border-left: 3px solid #dc3545;
}

/* テーブル内の偶数行（ストライプ） */
.data-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

CSSセレクタのベストプラクティス

効率的で保守しやすいCSSを書くために、以下のポイントを意識しましょう。

1. 詳細度を低く保つ

1
2
3
4
5
6
7
8
9

/* 避けるべき例：詳細度が高すぎる */
#header .navigation ul li a.active {
  color: red;
}

/* 推奨例：クラスを中心に使用 */
.nav-link.is-active {
  color: red;
}

2. セレクタの深さを制限する

1
2
3
4
5
6
7
8
9

/* 避けるべき例：深すぎるネスト */
.page .content .article .section .paragraph .text {
  color: #333;
}

/* 推奨例：必要最小限の深さ */
.article-text {
  color: #333;
}

3. 要素セレクタとクラスセレクタを適切に組み合わせる

1
2
3
4
5

/* 避けるべき例：要素に依存しすぎ */
div.button { ... }

/* 推奨例：要素に依存しない */
.button { ... }

4. 命名規則を統一する

BEM（Block Element Modifier）などの命名規則を採用することで、セレクタの意図が明確になります。

1
2
3
4
5

/* BEM記法の例 */
.card { ... }
.card__title { ... }
.card__content { ... }
.card--featured { ... }

まとめ

本記事では、CSSセレクタの基本から応用までを解説しました。

  • 要素セレクタ：HTMLタグ名で要素を選択
  • クラスセレクタ：.classnameで再利用可能なスタイルを定義
  • IDセレクタ：#idnameで一意の要素を選択
  • ユニバーサルセレクタ：*ですべての要素を選択
  • 属性セレクタ：[attr]や[attr="value"]で属性に基づいて選択
  • 結合子：子孫（ ）、子（>）、隣接兄弟（+）、後続兄弟（~）で要素の関係性を指定

CSSセレクタをマスターすることで、HTMLドキュメント内の任意の要素を正確に選択し、意図したスタイルを適用できるようになります。次のステップとして、CSSの詳細度（Specificity）やカスケードの仕組みを学ぶことで、より複雑なスタイル設計にも対応できるようになるでしょう。

参考リンク