CSSの疑似クラス:nth-child()使い方

疑似クラス :nth-child() の色々な使い方まとめてみました。

n番目

:nth-child(n)

例えば、2番目の場合 :nth-child(2) になります。

ul li:nth-child(2) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５

偶数

:nth-child(even)

ul li:nth-child(even) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５

偶数は:nth-child(even)のほか、:nth-child(2n)でも可能です。

:nth-child(2n)

ul li:nth-child(2n) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５

奇数

:nth-child(odd)

ul li:nth-child(odd) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５

奇数は:nth-child(odd)のほか、:nth-child(2n+1)でも可能です。

:nth-child(2n+1)

ul li:nth-child(2n+1) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５

3の倍数

:nth-child(3n)

ul li:nth-child(3n) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５
  • リスト６

3の倍数-1番目に適応

:nth-child(3n-1)

ul li:nth-child(3n-1) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５
  • リスト６

例えば、３並びにしたいとき真ん中のみスタイル適応したいときなどにも使えます。

  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５
  • リスト６
ul.nth-box{
  margin:0;
  padding:0;
}
ul.nth-box li{
  margin:10px 0;
  padding:20px 0;
  float:left;
  width: 32%;
  background:#999;
  color:#fff;
  text-align:center;
  list-style:none;
}
ul.nth-box li:nth-child(3n-1) {
  margin: 10px 2%;
  background:#F00;
}

4番目以降に適応

nth-child(n+4)

ul li:nth-child(n+4) {
  color: red;
  font-weight: bold;
}
  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５
  • リスト６

関連記事