More than 5 years have passed since last update.

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

Posted at 2017-02-19

書き方

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

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

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

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

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