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

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

奇数・偶数指定 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()19などの数字を指定すると、数字で指定した順番の要素が対象になります。

.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番ごと :nth-child(2n)

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

.hoge:nth-child(2n){  /*2番ごと*/
  background: #F00;
}
.hoge:nth-child(3n){  /*3番ごと*/
  background: #F00;
}
.hoge:nth-child(4n){  /*4番ごと*/
  background: #F00;
}
.hoge:nth-child(4n){  /*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;
}
  • このエントリーをはてなブックマークに追加