CSS｜最後の子要素から〇個分指定する方法をまとめてみた

例えば子要素が6個あってそのうち5と6番目だけを指定したいときなどに。

例）最後から2つだけ

.class-name:nth-last-child(-n+2) {
    color: red;
}

例）最後から2つ目〜最初まで

.class-name:nth-last-child(n+2) {
    color: red;
}

最後からではなく最初からにしたいときはnth-childを使う。

例）最初から2つだけ

.class-name:nth-child(-n+2) {
    color: red;
}

例）最初から2つ目〜最後まで

.class-name:nth-child(n+2) {
    color: red;
}

参考リンク

:nth-last-child() - CSS: カスケーディングスタイルシート | MDN

:nth-last-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。

developer.mozilla.org