CSS nth-child() 要素を順番で指定する 偶数/奇数

CSSで要素を順番で指定したいという時に使用するセレクタnth-child()。よく使う部分をサンプルでまとめました。

• 奇数・偶数 odd/even
• 1番目～9番目
• x番ごと（xの倍数）
• 1番目からx番ごと
• x番以降
• x番目まで
• x番目からx番目

奇数・偶数指定 odd/even

要素に:nth-child(odd)を指定すると奇数番目の要素が対象になります。
要素に:nth-child(even)を指定すると偶数番目の要素が対象になります。

.hoge:nth-child(odd){  /*奇数*/
    color: #FF0;
}
.hoge:nth-child(even){ /*偶数*/
    color: #FF0;
}

順番指定{

1番目～9番目 :nth-child(1)

:nth-child()に1や9などの数字を指定すると、数字で指定した順番の要素が対象になります。

.hoge:nth-child(1){  /*1番目*/
    color: #FF0;
}
.hoge:nth-child(2){ /*3番目*/
    color: #FF0;
}
.hoge:nth-child(3){ /*4番目*/
    color: #FF0;
}
.hoge:nth-child(4){ /*5番目*/
    color: #FF0;
}
.hoge:nth-child(5){ /*6番目*/
    color: #FF0;
}
.hoge:nth-child(6){ /*7番目*/
    color: #FF0;
}
.hoge:nth-child(7){ /*8番目*/
    color: #FF0;
}
.hoge:nth-child(8){ /*9番目*/
    color: #FF0;
}
.hoge:nth-child(9){ /*2番目*/
    color: #FF0;
}

x番ごと（xの倍数） :nth-child(2n)

:nth-child()に1などの数字とnを指定すると、数字で指定した順番ごとの要素が対象になります。2の倍数の時に指定といったケースに使用します。

.hoge:nth-child(2n){  /*2番ごと*/
  background: #F00;
}
.hoge:nth-child(3n){  /*3番ごと（3の倍数）*/
  background: #F00;
}
.hoge:nth-child(4n){  /*4番ごと（4の倍数）*/
  background: #F00;
}
.hoge:nth-child(4n){  /*5番ごと（5の倍数）*/
  background: #F00;
}

1番目からx番ごと :nth-child(2n+1)

:nth-child()に1などの数字とnと+1を指定すると、1番目から数字で指定した順番ごとの要素が対象になります。
+1は「開始位置」として覚えると簡単です。+2や+3といったように数字を増やすこともできます。

.hoge:nth-child(2n+1){  /*1番目から2番ごと*/
  background: #F00;
}
.hoge:nth-child(3n+1){  /*1番目から3番ごと*/
  background: #F00;
}
.hoge:nth-child(4n+1){  /*1番目から4番ごと*/
  background: #F00;
}
.hoge:nth-child(5n+1){  /*1番目から5番ごと*/
  background: #F00;
}

x番以降 :nth-child(n+2)

:nth-child()にnと+1などの数字を指定すると、数字で指定した順番以降の要素が対象になります。

.hoge:nth-child(n+2){  /*2番目以降*/
  background: #F00;
}
.hoge:nth-child(n+3){  /*3番目以降*/
  background: #F00;
}
.hoge:nth-child(n+4){  /*4番目以降*/
  background: #F00;
}
.hoge:nth-child(n+5){  /*5番目以降*/
  background: #F00;
}

x番目まで :nth-child(-n+5)

:nth-child()に-nと+5などの数字を指定すると、数字で指定した順番までの要素が対象になります。

.hoge:nth-child(-n+5){  /*5番目まで*/
  background: #F00;
}
.hoge:nth-child(-n+4){  /*4番目まで*/
  background: #F00;
}
.hoge:nth-child(-n+3){  /*3番目まで*/
  background: #F00;
}
.hoge:nth-child(-n+2){  /*2番目まで*/
  background: #F00;
}
.hoge:nth-child(-n+1){  /*1番目まで*/
  background: #F00;
}

x番目からx番目 :nth-child(n+2):nth-child(-n+9)

:nth-child(n+2)と:nth-child(-n+9)を指定すると、数字で指定した順番から順番までの要素が対象になります。
+1の数字は「開始位置」と「終了位置」して覚えると簡単です。+2や+3といったように数字を増やすこともできます。

.hoge:nth-child(n+2):nth-child(-n+9){  /*2番目～9番目*/
  background: #F00;
}
.hoge:nth-child(n+3):nth-child(-n+8){  /*3番目～8番目*/
  background: #F00;
}
.hoge:nth-child(n+4):nth-child(-n+7){  /*4番目～7番目*/
  background: #F00;
}
.hoge:nth-child(n+5):nth-child(-n+6){  /*5番目～6番目*/
  background: #F00;
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選