奇数・偶数・n番目などによく使うCSSまとめ

  • 記事のタイトルとURLをコピー

奇数・偶数・n番目などよく使うセレクタをまとめます。

スポンサーリンク

奇数・偶数

奇数

  • :nth-child(odd)
  • :nth-of-type(odd)

偶数

  • :nth-child(even)
  • :nth-of-type(even)

最初から

最初の要素

  • :first-child
  • :first-of-type

最初からX番目

  • :nth-child(X)
  • :nth-of-type(X)

最初からX番目まで

  • :nth-child(-n+X)
  • :nth-of-type(-n+X)

最初からX番目以降

  • :nth-child(n+X)
  • :nth-of-type(n+X)

最後から

最後の要素

  • :last-child
  • :last-of-type

最後からX番目

  • :nth-last-child(X)
  • :nth-last-of-type(X)

最後からX番目以前

  • :nth-last-child(n+X)
  • :nth-last-of-type(n+X)

最後からX番目以降

  • :nth-last-child(-n+X)
  • :nth-last-of-type(-n+X)

X番目置き

1/4/7…2つ置き・3つ並べレイアウト

  • :nth-child(3n-2)
  • :nth-of-type(3n-2)

1/5/9…3つ置き・4つ並べレイアウト

  • :nth-child(4n-3)
  • :nth-of-type(4n-3)
  • 記事のタイトルとURLをコピー