【第15回】セレクタ応用テクニック｜CSS初心者ノート

👪 子孫セレクタとは？

「ある要素の中にある、特定の要素」を指定する方法です。

.box p {
  color: #007bff;
}

👉 .box の中にある <p> だけが青色になります。

💡 全部のpではなく、「この中のpだけ」指定できるのがポイント。

---

🧠 よく使う疑似クラス（first-child など）

疑似クラスは、
要素の状態や位置に応じてスタイルを当てる方法です。

💡 よく使う例👇

li:first-child {
  font-weight: bold;
}

👉 リストの 一番最初のliだけ 太字になります。

li:last-child {
  color: #ff6699;
}

👉 最後のliだけ色が変わります。

li:nth-child(2) {
  color: green;
}

👉 2番目の要素だけにスタイルが当たります。

---

🪄 特定の要素だけにスタイルを当てる

子孫セレクタと疑似クラスは、組み合わせて使うことも可能です。

.box p:first-child {
  color: red;
}

👉 .box の中の 最初のpだけ 赤色になります。

💡 「どこにある」「何番目か」まで指定できるのが強み。

---

💻 実際のコード例

<div class="box">
  <p>最初の段落です</p>
  <p>2つ目の段落です</p>
  <p>3つ目の段落です</p>
</div>

.box p {
  color: #555;
}

.box p:first-child {
  font-weight: bold;
  color: #007bff;
}

---

👀 実際の表示結果

最初の段落だけが
青色＋太字で表示され、
2つ目以降の段落は通常表示になります。

---

⚠️ よくあるミスと注意点

• first-child は 同じ親の中で最初 が条件
• コメントや改行が影響することがある
• nth-child は 1 から数える（0はない）

---

✅ ポイントまとめ

👪 子孫セレクタ → 「この中のこの要素」
🧠 疑似クラス → 「順番・状態」で指定
🪄 組み合わせると指定が一気に細かくなる

---

HTMLやCSSの基礎をもっと学びたい方におすすめ👇

---

📌 次回予告

【第16回】CSSプロパティ解説まとめ（最終回）
→ これまで出てきたCSSをまとめます。
必要なところだけ戻れるインデックス回です📘

---

🔖 この回で出てきたプロパティ

#first-child #last-child #nth-child #子孫セレクタ

---