【css疑似要素】nth-childを使って何個目以降にスタイルを適用する方法

1個目にスタイルをかけたい場合は「nth-child(1) 」を指定します。

ですが「何個目以降」または「何個目まで」に適用したい場合が分からないというという人も多いのでその方法を今回紹介していきたいと思います。

同じくnth-child()を使うことで「何個目以降」または「何個目まで」にスタイルを適用することができます。

「何個目以降」または「何個目まで」のスタイルをかけたい

dl:nth-child(n + 3) {
        /* スタイルを記述 */
}

dl:nth-child(-n + 3) {
        /* スタイルを記述 */
}

偶数や奇数、そして何個目ずつにスタイルを適用したい場合もあると思います。

こちらもよく使うので記載しておきます。

dl:nth-child(even) {
        /* スタイルを記述 */
}

dl:nth-child(odd) {
        /* スタイルを記述 */
}

dl:nth-child(3n) {
        /* スタイルを記述 */
}