CSSの疑似クラスを使ってｎ番目の要素を取得

HTMLコーディングをしているとｎ番目の要素から間隔を空けたり、交互に彩色したりということが多いので、ｎ番目の要素（タグ）を取得できる便利なCSSの疑似クラスをメモ。

ｎ番目系の疑似クラス

n番目系の疑似クラスは大きく分けて「-child」と「-of-type」の2種類の系統に分類できる。
「i」の部分に整数値、odd（奇数）、even（偶数）、式（例：2n＋1）を指定可能。数値は親要素からの値になる。

種類	-child	-of-type
最初	:first-child	:first-of-type
最後	:last-child	:last-of-type
i番目	:nth-child(i)	:nth-of-type(i)
後ろからi番目	:nth-last-child(i)	:nth-last-of-type(i)
１個だけ	:only-child	:only-of-type
i番目以降	:nth-child(n+i)	:nth-of-type(n+i)
i番目以前	:nth-child(-n+i)	:nth-of-type(-n+i)
最後からi個	:nth-last-child(-n+i)	:nth-last-of-type(-n+i)
最後からi番目以前	:nth-last-child(n+i)	:nth-last-of-type(n+i)

「-child」と「-of-type」の違い

「-child」と「-of-type」の違いはカウントの対象となる子要素の違い。
「-child」は全部の子要素が対象になるのに対して、「-of-type」は子要素の中でも指定した要素のみがカウントの対象となる。

<div class="parents">
<div>兄</div>
<div>自分</div>
<p>1番目の弟</p>
<p>2番目の弟</p>
<p>3番目の弟</p>
<div>

<style>
/*1番目の弟が指定される*/
p:nth-child(3) {
	color: #f00;
}

/*3番目の弟が指定される*/
p:nth-of-type(3) {
	color: #00f;
}
</style>

その他のセレクタ

種類	例
隣の要素	h3+p
[class]や[href][src]など指定した属性	p[class]
属性内容の“一部”が一致	p[class*=”○○○○”]
属性内容の“始め”が一致	p[class^=”○○○○”]
属性内容の“最後”が一致	p[class$=”○○○○”]
文章の一行目	p::first-line
要素が空の時	ul:empty

• CSSのnth-childとnth-of-typeについて基本から学ぼう
• 何番目系の便利なCSSまとめ