Help us understand the problem. What is going on with this article?

【Tips】意外と知らない?:nth-childで〇番目以降"且つ"偶数・奇数の指定をする小技【CSS】

More than 3 years have passed since last update.

書き方

li:nth-child(n+3):nth-child(even) {
  3番目以降の要素、且つ偶数のスタイル
}

li:nth-child(n+3):nth-child(odd) {
  3番目以降の要素、且つ奇数のスタイル
}

コードを見て分かる通り、「:nth-child」は連結して使うことが可能なようです。
なので、今回は「〇番目以降の要素、"且つ"奇数の時と偶数の時」という指定をしましたが、
この方法を使えば色々な"且つ"に使えそうですね。

まとめ

「:nth-child」が連結出来るなんて全然知らなかったです...汗
パッと調べた限りではそういった記事を見つけられなかったので、誰かの為になればと思い書いてみました。

そして、昔であれば実現出来ることが少なかったですが、
「連結して書けば良いのでは?」と適当に書いたにも関わらず、思った通りの動きになってしまう便利な時代です(笑)

sy_125
Web テクニカルディレクター、フロントエンドエンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away