【CSS】子要素を指定するセレクタ完全網羅(直下・全指定・特定など)

Webサイトのデザインを行う際、「特定のボックスの中にある文字だけ色を変えたい」「リストの最初の項目だけ目立たせたい」といった要望は日常茶飯事です。

これを実現するために使うのがCSSの「セレクタ」ですが、特に「子要素」の指定方法は種類が多く、初心者の方がつまずきやすいポイントでもあります。

「スペース」で区切るのか、「>」を使うのか、あるいは「:first-child」のような擬似クラスを使うのか、状況に応じた使い分けが必須です。

この記事では、CSSで子要素を指定するための基本的な書き方から、特定の要素を除外したり、逆に「子要素を持つ親」を指定したりする最新のテクニックまで、現在のWeb制作で役立つ情報を徹底解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

基本：子要素（直下）と子孫要素の違い
特定の子要素を狙い撃ちするテクニック
「子要素を持つ親」を指定する最新セレクタ :has()
1. 特定の子要素がある時だけ親を変える
HTML/CSSのスキルを活かして年収を上げる方法

基本：子要素（直下）と子孫要素の違い

CSSで要素の階層を指定する際、最も重要なのが「直下の子要素（Children）」と「子孫要素（Descendants）」の区別です。

この2つを混同すると、意図しない場所までデザインが変わってしまう原因になります。

それぞれの書き方と、どのような範囲に適用されるのかを見ていきましょう。

直下の子要素だけを指定する「>」（子結合子）

親要素のすぐ下にある階層（1つ下の階層）の要素だけを指定したい場合は、>（大なり記号）を使います。

/* 書き方：親要素 > 子要素 */
.parent > .child {
    color: red;
}

<div class="parent">
    <div class="child">これは赤くなります（直下）</div>
    <div class="wrapper">
        <div class="child">これは赤くなりません（孫要素）</div>
    </div>
</div>

.parent > .child：クラス名「parent」の直下にある「child」だけを対象にします。
間に別の要素（wrapper）が挟まっている「孫要素」のchildにはスタイルが適用されません。
特定のコンポーネント内だけでスタイルを完結させたい場合に非常に有効です。

すべての子孫要素を指定する「」（空白／子孫結合子）

階層の深さに関係なく、その要素の中にある特定の要素すべてにスタイルを適用したい場合は、半角スペースで区切ります。

/* 書き方：親要素 子孫要素 */
.parent .child {
    color: blue;
}

<div class="parent">
    <div class="child">これは青くなります</div>
    <div class="wrapper">
        <div class="child">これも青くなります（孫要素）</div>
    </div>
</div>

.parent .child：クラス名「parent」の中にある「child」であれば、直下だろうが孫だろうが、すべて対象になります。
広範囲にスタイルを一括指定したい場合に便利ですが、予期せぬ場所まで変わってしまうリスクもあるため注意が必要です。

直下の「すべて」の要素を指定する「> *」

「このボックスの中にある要素は、タグの種類に関係なくすべて同じ設定にしたい」という場合は、ユニバーサルセレクタ *（アスタリスク）を組み合わせます。

/* 親要素の直下にあるすべての要素 */
.card > * {
    margin-bottom: 10px;
}

*：「すべての要素」を意味します。
.card > *：cardクラスの直下にある要素（h2でもpでもimgでも）すべてに対して、下マージン10pxを適用します。
要素間の余白を一括管理したい時などに頻繁に使われるテクニックです。

特定の子要素を狙い撃ちするテクニック

「リストの1番目だけ」「偶数番目だけ」といった、特定の位置にある子要素だけをスタイル変更したい場合は、「擬似クラス」を使用します。

これらを使いこなせると、HTMLに余計なクラス名を付ける必要がなくなり、コードがスッキリします。

1番目や最後を指定する :first-child / :last-child

最初の子要素、または最後の子要素を指定する基本のセレクタです。

/* 最初の子要素 */
li:first-child {
    font-weight: bold;
}

/* 最後の子要素 */
li:last-child {
    border-bottom: none; /* 最後の線だけ消す際によく使う */
}

順番を指定してデザインする :nth-child()

「3番目」や「偶数番目」など、規則性を持って要素を指定できるのが :nth-child() です。

/* 3番目の要素 */
li:nth-child(3) {
    color: orange;
}

/* 偶数番目 (2, 4, 6...) */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* 3の倍数 (3, 6, 9...) */
li:nth-child(3n) {
    color: green;
}

:nth-child(n)：親要素から見て n 番目の子要素を指定します。
even: 偶数を意味します（2n と書いても同じです）。奇数は odd です。
テーブルの縞模様（ストライプ）デザインなどで定番の指定方法です。

特定の要素「以外」を除外する :not()

「一番最後以外すべて」や「特定のクラス以外」を指定したい場合は、否定擬似クラス :not() を使います。

/* 最後の子要素「以外」に下線を引く */
li:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

/* .special クラスを持たない p タグ */
p:not(.special) {
    color: gray;
}

:not(...)：カッコ内で指定した条件に「当てはまらない」要素を選択します。
リストの区切り線など、「最後だけスタイルを無効化する」ための打ち消しCSSを書かなくて済むため、非常に効率的です。

「子要素を持つ親」を指定する最新セレクタ :has()

これまでCSSでは、「親から子」を指定することはできても、「特定の子供がいる親」を指定することはできませんでした。

しかし、近年のモダンブラウザ（Chrome, Edge, Safari, Firefox）でサポートされた :has() 擬似クラスを使えば、これが可能になります。

特定の子要素がある時だけ親を変える

例えば、「画像が含まれているカードだけ背景色を変えたい」といった場合に有効です。

/* 画像（img）を子孫に持つ .card だけ背景を黒にする */
.card:has(img) {
    background-color: #000;
    color: #fff;
}

/* チェックされたチェックボックスの直後にあるラベル */
input[type="checkbox"]:checked + label {
    /* 従来の方法（隣接セレクタ） */
}

/* :has を使うと「チェックボックスを含む行（親）」の色を変えることも可能 */
.row:has(input:checked) {
    background-color: #e3f2fd;
}