使用サンプル
見出し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」です