便利な擬似クラスをまとめました。

Xの倍数
:nth-child(Xn)
→2nなら2倍数、4nなら4の倍数

ex):nth-child(2n)
2の倍数

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
	li:nth-child(2n) {
	    background-color: #b0c4de;
	}
	

最後からX番目
:nth-last-child(X)
→最後からカウントして単一の要素を指定する

ex):nth-last-child(4)
最後から数えて4番目

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
	li:nth-last-child(4) {
			background-color: #b0c4de;
	}
	

X番目以降(X番目から最後まで)
:nth-child(n+X)
→3番目から最後まで、といったかんじで複数の要素を指定できる

ex):nth-child(n+3)
3番目から最後まで

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
	li:nth-child(n+3) {
			background-color: #b0c4de;
	}
	

X番目以前(最初からX番目まで)
:nth-child(-n+X)
→先頭から数えて4番目まで、など複数指定できる

ex):nth-child(-n+4)
先頭から4番目まで

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
	li:nth-child(-n+4) {
			background-color: #b0c4de;
	}
	

最後からX番目まで
:nth-last-child(-n+X)
→最後から数えて4番目、というかんじで複数指定できる

ex):nth-last-child(-n+4)
最後から4番目まで

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
	li:nth-last-child(-n+4) {
			background-color: #b0c4de;
	}
	

最後からX番目以前
:nth-last-child(n+X)
→最後から3番目以前の複数の要素を指定する

ex):nth-last-child(n+3)
最後から3番目以前

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
	li:nth-last-child(n+3) {
			background-color: #b0c4de;
	}