Menu
Coddy logo textTech

構造擬似クラス

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 12/43。

CSSにおける構造疑似クラスは、HTMLドキュメント内での位置や構造に基づいて要素にスタイルを適用するために使用されます。これらを使用すると、追加のクラスやIDを必要とせずに、最初の要素、最後の要素、または特定の番号の要素などを選択できます。

一般的な例は以下の通りです:

  • :first-child — 親要素の最初の子を選択します。
  • :last-child — 親要素の最後の子を選択します。
  • :nth-child(n) — n番目の子を選択します(例:2番目ごと、3番目ごとなど)。
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チートシート

構造擬似クラスは、HTMLドキュメント内での位置に基づいて要素にスタイルを適用します:

  • :first-child — 親要素の最初の子要素を選択します
  • :last-child — 親要素の最後の子要素を選択します
  • :nth-child(n) — n番目の子要素を選択します(例:2番目ごと、3番目ごとなど)

自分で試してみよう

このレッスンにはコードチャレンジは含まれていません。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

CSS Masteryのすべてのレッスン