インタラクティブCSSセレクタ辞典（37）

セレクタを選んで「ハイライト」。該当要素が光き、下にサンプルコードが表示されます。

CSSセレクタコード

各セレクタが当たる要素が配置されています。

（ここにサンプルコードが表示されます）
基本（タグ / クラス / ID / 複数）

サイトヘッダー（#header）

見出しh2

段落p（.item）

段落p（通常）

階層 / 兄弟（子孫 / 直下 / 隣接 / 一般）

div の子孫 p

  • li-1
  • li-2
  • li-3

兄弟の起点h2

h2 + p（直後の段落）

h2 ~ p（後続の段落）

疑似クラス（構造・状態）
  • 最初の子
  • 2番目の子
  • 最後の子

唯一の子要素

この段落は型の最初

この段落は型の2番目

この段落は型の最後

BOX
疑似要素 / :empty

疑似要素テスト段落