li:nth-child(n+3):nth-child(even) { 3番目以降の要素、且つ偶数のスタイル } li:nth-child(n+3):nth-child(odd) { 3番目以降の要素、且つ奇数のスタイル } コードを見て分かる通り、「:nth-child」は連結して使うことが可能なようです。 なので、今回は「〇番目以降の要素、"且つ"奇数の時と偶数の時」という指定をしましたが、 この方法を使えば色々な"且つ"に使えそうですね。 まとめ 「:nth-child」が連結出来るなんて全然知らなかったです...汗 パッと調べた限りではそういった記事を見つけられなかったので、誰かの為になればと思い書いてみました。 そして、昔であれば実現出来ることが少なかったですが、 「連結して書けば良いのでは?」と適当に書いたにも関わらず、思った通りの動きになってしまう便利な時代です(笑)
![【Tips】意外と知らない?:nth-childで〇番目以降"且つ"偶数・奇数の指定をする小技【CSS】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a6395bb00800da4788b64ab109f2196d75cd30c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwVGlwcyVFMyU4MCU5MSVFNiU4NCU4RiVFNSVBNCU5NiVFMyU4MSVBOCVFNyU5RiVBNSVFMyU4MiU4OSVFMyU4MSVBQSVFMyU4MSU4NCVFRiVCQyU5RiUzQW50aC1jaGlsZCVFMyU4MSVBNyVFMyU4MCU4NyVFNyU5NSVBQSVFNyU5QiVBRSVFNCVCQiVBNSVFOSU5OSU4RCUyMiVFNCVCOCU5NCVFMyU4MSVBNCUyMiVFNSU4MSVCNiVFNiU5NSVCMCVFMyU4MyVCQiVFNSVBNSU4NyVFNiU5NSVCMCVFMyU4MSVBRSVFNiU4QyU4NyVFNSVBRSU5QSVFMyU4MiU5MiVFMyU4MSU5OSVFMyU4MiU4QiVFNSVCMCU4RiVFNiU4QSU4MCVFMyU4MCU5MENTUyVFMyU4MCU5MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NjI4YmRkNzAyMzk0MDk5MDg3MjI5NTQ3ZTEzZjVjZjk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzeV8xMjUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYxOWE0OGQyZDRhZWY4ZGU2MzU2NWU0OTA1NDEwY2Y5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd3f6a569b3932c6c3210c99fcbc24035)