CSSセレクタまとめ 擬似クラス編
：tableやリストなど、様々なところで使える便利なCSSセレクタを紹介します。今回は、擬似クラスをみていきます。
今回は擬似クラスの１つ、nth-childやnth-last-childのサンプルを紹介していきます。
tableやリストなど、様々なところで使えて便利ですよね。
ふと忘れてしまう事もあるかもしれませんので、、参考にしてみてください♪
目次
準備
サンプルを使用する際は、下記のようなリストを用意して、適用してください。
見た目などは、cssを用意してご自由に設定してください。(※CSSリセット済み)
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
１.最初(最後)
:first-child
一番最初の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:first-child{
background-color: skyblue;
}
:last-child
一番最後の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:last-child{
background-color: skyblue;
}２.最初(最後)からn番目
:nth-child(3)
３番目の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(3){
background-color: pink;
}
:nth-last-child(3)
最後から３番目の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-last-child(3){
background-color: pink;
}
３.偶数、奇数
:nth-child(even)
偶数番目の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(even){
background-color: skyblue;
}
:nth-child(odd)
奇数番目の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(odd){
background-color: skyblue;
}
４.最初(最後)からnの倍数
:nth-child(3n)
3の倍数の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(3n){
background-color: pink;
}
:nth-last-child(3n)
最後から3の倍数の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-last-child(3n){
background-color: pink;
}
５.最初(最後)から、nの倍数
:nth-child(2n+1)
１番目の子要素を選択し、その後は2の倍数の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(2n+1){
background-color: skyblue;
}
:nth-last-child(2n+1)
最後にある子要素を選択し、その後は2の倍数の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-last-child(2n+1){
background-color: skyblue;
}
６.最初(最後)からn番目以降(以前)
:nth-child(n+3)
3番目以降の要素を指定します。(n+3)は、0+3=3、1+3=4、2+3=5…となっています。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(n+3){
background-color: pink;
}
:nth-child(-n+3)
3番目以前の要素を指定します。(-n+3)は、-1+3=2、-2+3=1、-3+3=0、…となっています。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-child(-n+3){
background-color: pink;
}
:nth-last-child(-n+3)
最後から3番目以前の要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-last-child(n+3){
background-color: pink;
}
:nth-last-child(-n+3)
最後から3番目までの要素を指定します。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul li:nth-last-child(-n+3){
background-color: pink;
}
まとめ
どうでしたか？
本当によく使うセレクタなので 何度も使ったり、見返したりしながら覚えていきましょう♪