【CSSセレクタ入門】子孫セレクタ・子セレクタ・隣接セレクタの基本と使い分け

「どの場所のどのタグにデザインを当てるか？」——CSSは“指定の精度”で仕上がりが決まります。
本記事では、初心者が最初に迷いやすい 子孫セレクタ（半角スペース）／子セレクタ（>）／隣接セレクタ（+） を、HTMLの親子関係とともにやさしく解説。

htmlでブログを書いてみましょう！

「CSSのセレクタは、どの要素にスタイルを適用するかを指定する大切な仕組みです。特に『子孫セレクタ』『子セレクタ』『隣接セレクタ』は、HTMLの親子関係や兄弟関係を理解するうえで欠かせません。本記事では、初心者でも分かりやすいように基本の書き方と使い分けを実際のコード例を交えて解説します。」

今回は「子孫セレクタ」「子セレクタ」「隣接セレクタ」という３つのセレクタを使って、シンプルで読みやすいブログ記事を一緒に作ってみましょう！↓これを作ります

emmet機能を使って、htmlコードを書きましょう！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

・実際のパソコンの画面↓

・emmet機能を使って簡単作成！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

・クラス名をblogとします。emmet機能を使うため、”.blog”と入力し、タブキーまたは確定キーを押します。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

・実際のパソコン画面↓

・emmet機能でクラス名blogのdiv要素が簡単に書けました。

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

・実際のパソコン画面↓

クラス名つけたdiv要素を書く場合は、このようにemmet機能を使って簡単に書きましょう！
・emeetの使い方はこちらから→【初心者必見】Emmet機能でHTML・CSSのタグ入力が一瞬！VS Codeでコーディングを時短する方法
・できるだけ簡単にコードを書く練習をするために、emmet機能を使って次のコードを書きましょう↓

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

・実際のパソコン画面↓

・htmlのみで書いたコードをWeb表示させた状態です。↓

htmlの親子関係を整理

このhtmlの親子関係が分かりますか？
・分からない方はこちらを読むと理解します→【初心者必見】親要素からひ孫要素までわかる！HTML要素と階層構造の徹底解説「めちゃくちゃ分かりやすい図解付き」

・親要素…一番外側は親要素
・子要素…<h1> と<div class="”article”">と<div class="”footer”">
・孫要素…<div class="”article”">の中にある<h2>や<p>
・ひ孫要素…<div class="”footer”">の中にある<a href="/en/”/#”">シェア</a>

子孫セレクタの書き方

・以下のように子孫セレクタを使ってCSSデザインをします

・子孫セレクタの書き方は、セレクタとセレクタの間に、半角スペースを入れるのがポイント！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

子セレクタの書き方

・子セレクタの書き方は、セレクタとセレクタの間に、大なりを入れるのがポイント！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

隣接セレクタの書き方

・隣接セレクタの書き方は、セレクタとセレクタの間に、➕を入れるのがポイント！

See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.

よくある間違いと回避法

• 間違い： なんでも子孫セレクタで指定 → 後から上書き地獄
  回避： 影響範囲を最小化（子セレクタやクラス併用）
• 間違い： h2 + p を使ったのに効かない
  回避： h2 のすぐ後ろが <p> であるかを確認（間に他要素があると当たらない）
• 間違い： ネストが深すぎる指定（.blog .article .section .content p など）
  回避： 2〜3階層までを目安に。必要ならクラスを付与

Summary

CSSでは、「どの場所のどのタグにデザインを適用するか」をセレクタで指定します。
今回紹介したセレクタは、それぞれ関係の近さで使い分けます。

・子孫セレクタ…親の中の「どこかにある」子にスタイルを当てたい時に使う
　　セレクタとセレクタの間に 【 スペース 】 を入れる
・子セレクタ…「すぐ下の子」だけにスタイルを当てたい時に使う
　　セレクタとセレクタの間に【 > 】 を入れる
・隣接セレクタ…「すぐ隣にある兄弟要素」だけにスタイルを当てたい時に使う
　　セレクタとセレクタの間に【 ＋ 】 を入れる

この3つのセレクタは、「どれくらい近い関係か」で使い分けるのがコツです。
最初はややこしく感じますが、HTMLの構造（親子関係）をイメージしながらCSSを書くと、グッと理解が深まります。

次回は、属性セレクタとは、classなしでもデザインできる便利ワザ！

合わせて読むと理解が深まる記事はこちら↓

• 「属性セレクタの使い方（classなしでも指定できる）」初心者向け「属性セレクタとは？classなしでCSSデザインを適用する便利ワザを解説」
• 「CSSの優先順位：specificityの基本」「CSSのルール」誰が一番エライ？学校を例えで学ぶ、セレクタの力関係
• 「Emmetで爆速コーディング」タグをいちいち全部書かなくてもOK! 「Emmet機能でコードが一瞬で書ける」