2017/06/02  CSS  ,

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

n番目

:nth-child(n)

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

ul li:nth-child(2) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

偶数

:nth-child(even)

ul li:nth-child(even) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

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

:nth-child(2n)

ul li:nth-child(2n) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

奇数

:nth-child(odd)

ul li:nth-child(odd) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

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

:nth-child(2n+1)

ul li:nth-child(2n+1) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

3の倍数

:nth-child(3n)

ul li:nth-child(3n) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6

3の倍数-1番目に適応

:nth-child(3n-1)

ul li:nth-child(3n-1) {
  color: red;
  font-weight: bold;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6

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

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6
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;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6