CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 子孫セレクタと直下セレクタ

Web APP CSS
スポンサーリンク

子孫セレクタと直下セレクタを“本質から”理解する

CSSの中でも、初心者がつまずきやすいのが 子孫セレクタ（スペース） と 直下セレクタ（>） の違いです。
この2つを正しく理解すると、HTML構造を意識した「きれいなCSS」が書けるようになります。

Tailwind CSSではセレクタを直接書かないため、
「どう置き換えるのか」も合わせて解説します。

子孫セレクタとは何か（スペースで指定）

子孫セレクタの基本

子孫セレクタは “ある要素の中に含まれるすべての対象” にスタイルを当てます。

.container p {
  color: #333;
}
CSS

これは「.container の中にあるすべての <p>」に適用されます。

HTML例

<div class="container">
  <p>これは適用される</p>

  <div>
    <p>これも適用される（深い階層でもOK）</p>
  </div>
</div>
HTML

深掘り：子孫セレクタは“範囲指定”に強い

子孫セレクタは「このエリアの中にあるもの全部」という指定が得意です。

  • 記事本文内の段落
  • ナビゲーション内のリンク
  • フッター内のテキスト

など、「範囲でまとめてデザインしたい」時に便利です。

Tailwindでは、子孫セレクタを使わず、対象の要素に直接クラスを付けます。

<div class="container">
  <p class="text-gray-800">これは適用される</p>

  <div>
    <p class="text-gray-800">これも適用される</p>
  </div>
</div>
HTML

Tailwindは「HTML側で完結させる」スタイルなので、
CSSのように範囲指定はしません。

直下セレクタとは何か（> で指定）

直下セレクタの基本

直下セレクタは “親のすぐ下にある子要素だけ” にスタイルを当てます。

.container > p {
  color: blue;
}
CSS

HTML例

<div class="container">
  <p>これは適用される（直下の子）</p>

  <div>
    <p>これは適用されない（孫要素）</p>
  </div>
</div>
HTML

深掘り：直下セレクタは“構造を厳密にコントロール”したい時に使う

直下セレクタは、以下のような場面で役立ちます。

  • カード内の「タイトルだけ」を装飾したい
  • リストの「最初の階層だけ」をデザインしたい
  • セクション直下の見出しだけを強調したい

Tailwindでは、直下セレクタのような構造指定は基本的に行わず、
必要な要素に直接クラスを付けます。

<div class="container">
  <p class="text-blue-600">これは適用される</p>

  <div>
    <p class="text-gray-800">これは適用されない</p>
  </div>
</div>
HTML

子孫セレクタと直下セレクタの違いを視覚的に理解する

CSS版

/* 子孫セレクタ：全部 */
.box p {
  color: red;
}

/* 直下セレクタ：すぐ下だけ */
.box > p {
  font-weight: bold;
}
CSS

HTML

<div class="box">
  <p>赤くて太字（直下）</p>

  <div>
    <p>赤いけど太字ではない（孫）</p>
  </div>
</div>
HTML

Tailwind版（セレクタを使わない）

<div class="box">
  <p class="text-red-600 font-bold">赤くて太字（直下）</p>

  <div>
    <p class="text-red-600">赤いけど太字ではない（孫）</p>
  </div>
</div>
HTML

Tailwindでは、構造に依存せず「必要なところに必要なクラスを書く」方式です。

よくある失敗と改善例

失敗例1：子孫セレクタを使いすぎて予期せぬ場所に影響する

.content p {
  color: #444;
}
CSS

一見便利ですが、.content の中にあるすべての <p> が対象になるため、
後から追加した部分にも勝手にスタイルが当たってしまいます。

改善案：必要な部分だけクラスを付ける

.article-text {
  color: #444;
}
CSS

Tailwind版

<p class="text-gray-700">本文テキスト</p>
HTML

失敗例2：直下セレクタを使っているのにHTML構造が変わって効かなくなる

.card > h3 {
  font-size: 20px;
}
CSS

HTMLを少し変えただけで効かなくなることがあります。

<div class="card">
  <div>
    <h3>← 直下じゃなくなったので効かない</h3>
  </div>
</div>
HTML

改善案：構造に依存しないクラスを使う

.card-title {
  font-size: 20px;
}
CSS

Tailwind版

<h3 class="text-xl font-bold">タイトル</h3>
HTML

例題で理解を深める

例題：ニュース一覧のタイトルと本文をデザインする

CSS版（子孫セレクタと直下セレクタの併用）

.news-list > h2 {
  font-size: 24px;
  margin-bottom: 16px;
}

.news-list .item p {
  color: #555;
}
CSS

HTML

<div class="news-list">
  <h2>お知らせ</h2>

  <div class="item">
    <p>夏季休業のお知らせ</p>
  </div>

  <div class="item">
    <p>新サービス開始のお知らせ</p>
  </div>
</div>
HTML

Tailwind版

<div class="news-list">
  <h2 class="text-2xl mb-4">お知らせ</h2>

  <div class="item">
    <p class="text-gray-600">夏季休業のお知らせ</p>
  </div>

  <div class="item">
    <p class="text-gray-600">新サービス開始のお知らせ</p>
  </div>
</div>
HTML

まとめ：子孫セレクタと直下セレクタの使い分け

子孫セレクタ（スペース）

  • 範囲指定に強い
  • 深い階層でも全部対象
  • 便利だが、影響範囲が広すぎることがある

直下セレクタ（>）

  • 親のすぐ下だけ
  • 構造が変わると効かなくなる
  • 厳密にコントロールしたい時に使う

Tailwindでは？

  • セレクタを使わず、必要な要素に直接クラスを書く
  • 構造に依存しないため、予期せぬ崩れが起きにくい
スポンサーリンク
タイトルとURLをコピーしました