36
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

書き方

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

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

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

まとめ

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

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

36
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?