nth-childの設定例

特定の要素配下でn番目の要素に対してスタイルを適用する際に疑似クラスの nth-child や first-child、last-child などをよく利用しますが、指定方法を毎回調べてしまっていたので、いくつか設定例をまとめておきます。

:nth-child(5){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:nth-child(odd){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

または

:nth-child(2n+1){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:nth-child(even){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

または

:nth-child(2n){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:nth-child(-n+9){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:nth-child(n+10){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:nth-child(3n+5){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:first-child{
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

または

:nth-child(1){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:last-child{
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

:nth-last-child(3){
    background-color:lightcoral;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12