さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS3】擬似要素「nth-child」セレクタで要素の何番目かを指定

Pocket
LINEで送る

「nth-child」セレクタを使用すると、要素の何番目かを指定してCSSを設定することが出来ます。

  • 3番目のliに → li:nth-child(3)
  • 奇数のliに → li:nth-child(odd)
  • 偶数のliに → li:nth-child(even)
  • 3の倍数のliに(3,6,9,12・・・) → li:nth-child(3n)
  • 3n+1数番目のliに(1,4,7,10・・・) → li:nth-child(3n+1)

参考サイト

カテゴリー:css, HP制作

コメントを残す

コメント内容