css - nth-child を使用して最後の 3 つの項目を選択し、奇数または偶数を選択できますか?

Question

シナリオ

たとえば、次のものがあるとします。

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9

<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>
</ul>

奇数と偶数のデフォルトの背景があります。

li:nth-child(even) {
    background: #ff0000;
} 

li:nth-child(odd) {
    background: #00ff00;
}

質問

しかし、偶数か奇数かに応じて、最後の 3 つの結果に異なる背景を適用したいと考えています。

li:nth-last-child(-n + 3)(even) {
    background: #0000ff;
}

li:nth-last-child(-n + 3)(odd) {
    background: #ffff00;
}

これは可能ですか？

score 4 · Accepted Answer

:nth-child次の部分も繰り返す必要があります。

li:nth-last-child(-n + 3):nth-child(even) {
    background: #0000ff;
}

li:nth-last-child(-n + 3):nth-child(odd) {
    background: #ffff00;
}

また、持っている要素の数に応じて、:nth-child(odd)と:nth-last-child(odd)(およびそのeven対応する要素) は異なる要素を選択する場合があります。

1 に答える 1