使用サンプル

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

nth-child(X)

Xで指定した要素を指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

nth-of-type(X)

Xで指定した同じタイプのタグを指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

nth-child(Xn)

Xの倍数の要素を指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

nth-child(odd)、nth-child(even)

「odd」(奇数)、「even」(偶数)の要素を指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

nth-last-child(X)

最後からX番目の要素を指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

nth-last-of-type(X)

最後からX番目の同じタイプのタグを指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

first-child

最初の要素を指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

first-of-type

最初の同じタイプのタグを指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

last-child

最後の要素を指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

last-of-type

最後の同じタイプのタグを指定

見出し1

ここは1番目の「p」

ここは2番目の「p」

ここは3番目の「p」

見出し2

ここは4番目の「p」

ここは5番目の「p」

ここは6番目の「p」

only-child

唯一の子要素を指定

見出し1

ここは2つ「span」がある「p」です

ここは2つ「span」がある「p」です

ここは「strong」と「span」ひとつずつある「p」です

見出し2

ここは2つ「span」がある「p」です

ここは2つ「span」がある「p」です

ここは1つだけ「span」がある「p」です

only-of-type

同じタイプのタグで唯一の子要素を指定

見出し1

ここは2つ「span」がある「p」です

ここは2つ「span」がある「p」です

ここは「strong」と「span」ひとつずつある「p」です

見出し2

ここは2つ「span」がある「p」です

ここは2つ「span」がある「p」です

ここは1つだけ「span」がある「p」です