CSSの入れ子構造セレクタ完全ガイド！初心者でもわかる書き方と使い方

入れ子構造のセレクタをきれいに書くテクニック

先生と生徒の会話形式で理解しよう

生徒

「先生、CSSで入れ子になったタグにだけスタイルを当てたいときって、どう書けばいいんですか？」

先生

「いい質問ですね。CSSのセレクタを組み合わせて書くことで、入れ子構造に合わせたスタイルができますよ。」

生徒

「でも入れ子ってなんだか難しそうです…」

先生

「大丈夫。まずは“入れ子”がどういうものか、身近な例えで説明しましょう！」

1. 入れ子構造（ネスト）ってなに？HTMLでよくある形を覚えよう

「入れ子（ネスト）」というのは、あるタグの中に別のタグが入っている構造のことです。

たとえば「箱の中にさらに小さい箱が入っている状態」を想像してみてください。それが入れ子構造です。

HTMLでは、次のような構造がよく使われます。


<div class="box">
<p>文章の中に<span>強調したい文字</span>があります。</p>
</div>

ブラウザ表示

このように、外側のdivの中にp、さらにその中にspanが入っている形が「入れ子構造（ネスト）」です。

2. CSSで入れ子構造にスタイルを当てる基本の書き方

CSSでは、親タグと子タグの関係を指定してスタイルを当てることができます。

さっきのHTMLで、spanの文字だけ赤くしたい場合は、次のように書きます。


<style>
.box p span {
    color: red;
}
</style>

<div class="box">
<p>文章の中に<span>強調したい文字</span>があります。</p>
</div>

ブラウザ表示

この指定方法は、「boxクラスの中にあるpタグ、その中にあるspanタグ」という順番で指定しています。

3. セレクタとは？タグを選ぶためのCSSの目印

セレクタとは、CSSでどの部分にスタイルを当てるかを決める「目印」のことです。

セレクタにはいくつか種類がありますが、ここでは基本の3つを紹介します。

タグセレクタ：HTMLのタグ名そのもの。例：p、h1
クラスセレクタ：HTMLタグのclass属性につけた名前。例：.box（.が必要）
IDセレクタ：HTMLタグのid属性につけた名前。例：#main（#が必要）

4. 入れ子セレクタを使うと、なにが便利なの？

入れ子構造のセレクタを使うと、特定の場所の中にある要素だけにスタイルを当てることができます。

たとえば「見出しは青くしたいけど、特定の箱の中にある見出しだけ赤くしたい」とき、次のように使えます。


<style>
h2 {
    color: blue;
}
.special-box h2 {
    color: red;
}
</style>

<h2>これは通常の見出し</h2>
<div class="special-box">
<h2>これは特別な箱の中の見出し</h2>
</div>

ブラウザ表示

このように「.special-box h2」と書けば、「special-boxの中にあるh2タグ」だけにスタイルが当たります。

5. ちょっとしたテクニック！読みやすく整理されたCSSを書くコツ

CSSを複数書くと、だんだん長くなって読みにくくなります。

そんなときは、「親から順にスペースを空けて書く」「ブロックごとにコメントをつける」といった工夫をすると見やすくなります。

例として、次のように整理できます。


<style>
/* メインコンテンツの設定 */
.main-content h1 {
    font-size: 24px;
    color: navy;
}

/* メインコンテンツ内の段落 */
.main-content p {
    font-size: 16px;
    line-height: 1.5;
}
</style>

<div class="main-content">
<h1>記事のタイトル</h1>
<p>記事の本文がここに入ります。</p>
</div>

ブラウザ表示

コメント（/* 〜 */）を書くことで、後から見たときに「これは何のためのCSSか」が一目で分かるようになります。