CSS '>' セレクタ vs. 子孫セレクタ：違いを理解して使い分けよう

CSS '>' セレクタ：直近の子要素のみを選択する力

例：

<div class="container">
  <h1>見出し</h1>
  <p>本文</p>
</div>

.container > p {
  color: red;
}

この例では、.container 要素の直下にある p 要素のみが赤色になります。<h1> 要素は影響を受けません。

ポイント:

• > は 直近の子要素のみを選択
• 複数の階層を指定したい場合は、> を繋げて記述
• 他のセレクタと組み合わせて、より精度の高い選択が可能

.container > h1 + p {
  font-size: 18px;
}

この例では、.container 要素の直下に存在する <h1> 要素のすぐ後に続く p 要素のみがフォントサイズ 18px になります。

用途:

• 特定の要素の直下にあるコンテンツにスタイルを適用
• レイアウトを明確に制御
• 特定の要素のみに装飾を施し、デザインを洗練

補足:

• > は 子孫セレクタ とは異なる
• 子孫セレクタは、すべての子孫要素を選択

• > セレクタの使い方について、もっと詳しく知りたい
• 他のセレクタとの違いについて、詳しく教えて欲しい

シンプルな例

<div class="container">
  <h1>見出し</h1>
  <p>本文</p>
</div>

.container > p {
  color: red;
}

複数の階層を指定

<div class="container">
  <h2>見出し</h2>
  <section>
    <h3>小見出し</h3>
    <p>本文</p>
  </section>
</div>

.container > section > p {
  font-size: 18px;
}

隣接兄弟要素を選択

<div class="container">
  <h1>見出し</h1>
  <p>本文</p>
  <button>ボタン</button>
</div>

.container > h1 + p {
  color: blue;
}

疑似クラスと組み合わせる

<div class="container">
  <a href="#">リンク</a>
</div>

.container > a:hover {
  text-decoration: underline;
}

• .container 要素の直下にある a 要素がマウスホバーされたときのみ、下線が引かれます。

これらのサンプルコードは、> セレクタの使用方法を理解するのに役立ちます。

CSS '>' セレクタは、直近の子要素のみを選択する強力なツールです。このセレクタをマスターすることで、より精度の高いスタイル設定が可能になり、Webサイトのデザインを洗練することができます。

CSS '>' セレクタの代替方法

子孫セレクタ ()

例:

<div class="container">
  <h1>見出し</h1>
  <p>本文</p>
</div>

.container p {
  color: red;
}

利点:

• 記述がシンプル
• すべての階層の子孫要素を選択できる

• 特定の階層のみを選択できない

隣接兄弟セレクタ (+)

+ セレクタは、直後に続く兄弟要素のみを選択できます。

<div class="container">
  <h1>見出し</h1>
  <p>本文</p>
  <button>ボタン</button>
</div>

.container h1 + p {
  color: blue;
}

• 隣接する兄弟要素のみを選択できる

• 複数の兄弟要素を選択できない

nth-child() 疑似クラス

nth-child() 疑似クラスは、特定の位置にある子要素を選択できます。

<div class="container">
  <p>1つ目の段落</p>
  <p>2つ目の段落</p>
  <p>3つ目の段落</p>
</div>

.container p:nth-child(2) {
  color: red;
}

• 特定の位置にある子要素を選択できる

• 記述がやや複雑

nth-of-type() 疑似クラス

<div class="container">
  <h1>見出し</h1>
  <p>本文</p>
  <h2>見出し</h2>
  <p>本文</p>
</div>

.container p:nth-of-type(2) {
  color: red;
}

JavaScript を使用して、動的にスタイルを適用することもできます。

const container = document.querySelector('.container');
const paragraphs = container.querySelectorAll('p');

paragraphs[1].style.color = 'red';

• 動的にスタイルを適用できる

• JavaScript の知識が必要

> セレクタは直近の子要素のみを選択する便利なツールですが、状況によっては他の方法の方が適切な場合があります。上記の方法を参考に、最適な方法を選択してください。

• CSS Diner - CSS プロパティとセレクタを学ぶ: [https://flukeout.github