便利！何番目系の擬似クラスまとめ

うぇぶもようの中の人

9年前

擬似クラスとは？

便利～！と思ってなんとなく使っているけど、きちんとは理解していなかった…。
いまさら感はあるけれどおさらいとして、メモメモ。

擬似クラスとは要素が特定の状態のときにスタイルを指定するもの。
セレクタの後ろに” : “をつけて記述する。

これを使えば、簡単にいろいろな条件でcssが指定できます。

よくあれ？あれはなんだっけ？となってしまうので
私がよく使うものをメモ。

親要素から見て子要素の最初の要素にスタイルを適用

li:first-child {
	background: #FF8E8E;
}

親要素から見て子要素の最後の要素にスタイルを適用

li:last-child {
	background: #FF8E8E;
}

奇数番目の要素にスタイルを適用

li:nth-child(odd) {
	background: #FF8E8E;
}

偶数番目の要素にスタイルを適用

li:nth-child(even) {
	background: #FF8E8E;
}

上からX番目の要素にスタイルを適用。
:nth-child(X)の”X”の部分を適用させたい番目に変更する。

たとえば下のデモの場合、上から2番目に適用させています。

li:nth-child(2) {
	background: #FF8E8E;
}

下からX番目の要素にスタイルを適用。
:nth-last-child(X)の”X”の部分を適用させたい番目に変更する。

たとえば下のデモの場合、下から2番目に適用させています。

li:nth-last-child(2) {
	background: #FF8E8E;
}

X番ずつスタイルが適用される。
たとえば
:nth-child(2n)だと、2,4,6,8,10,12….
:nth-child(3n)だと、3,6,9,12,15,18….
のようなかんじ。

下のデモは:nth-child(3n)を適用しています。

li:nth-child(3n) {
	background: #FF8E8E;
}

以上がよく使っているかなと思いますが、ほかにもたくさん指定はあります。
随時、使用してみて覚えたいときに追加していきます。