CSSで何番目・偶数・奇数の要素にプロパティを適用させる方法
制作を進める中で、要素の偶数のみ、奇数のみにCSSを当てたい時や、要素の3番目だけにCSSを当てたい時があるかと思います。
その際に活躍するのが、擬似クラスのnth-childとnth-of-typeです。
擬似クラスとは、セレクターに、コロン（ : ）をつけたものを指します。
よく使われる擬似クラスは、：hoverや：checkedが有名です。
nth-child・nth-of-typeの指定方法
nth-child・nth-of-typeの構文は、下記のとおりです。
nth-child(値)やnth-of-type(値)の値の中には、指定したい要素の数字やeven・2nなどの値が入ります。
詳しくは、下記コンテンツの「何番目・偶数・奇数を指定する擬似クラス一覧」をご覧ください。
プロパティ:プロパティ値;
}
nth-child・nth-of-typeのサンプルコード
color:red;
}
.of-type div:nth-of-type(3){
color:red;
}
nth-childとnth-of-typeの違い
nth-childとnth-of-typeは、要素の数え方に違いがあります。
nth-childは、親要素内のすべての兄弟要素の位置に従って子要素を選択しますが、nth-of-typeは、nth-of-typeは指定したセレクタのみを数えます。
nth-childの場合
nth-of-typeの場合
何番目・偶数・奇数を指定する擬似クラス一覧
| 指定範囲 | -child | -of-type |
| 最初 | first-child | first-of-type |
| 最後 | last-child | last-of-type |
| 偶数 | nth-child(even)もしくは nth-child(2n) | nth-of-type(even) もしくは nth-of-type(2n) |
| 奇数 | nth-child(odd)もしくは nth-child(2n-1) | nth-of-type(odd) もしくは nth-of-type(2n-1) |
| x番目 | nth-child(x) | nth-of-type(x) |
| xの倍数 | nth-child(xn) | nth-of-type(xn) |
| x番目以降の要素全て | nth-child(n+x) | nth-of-type(n+x) |
CSSで最初の要素の指定方法
CSSで最初の要素の指定方法には、:first-childもしくはfirst-of-typeを使用します。
サンプルコードは下記です。
color: #000;
}
ul li:first-of-type{
color: #000;
}
CSSで最後の要素の指定方法
CSSでxの倍数の要素の指定するには、last-childもしくはlast-of-typeを使用します。
サンプルコードは下記です。
color: #000;
}
ul li:last-of-type{
color: #000;
}
CSSで偶数の要素の指定方法
CSSでxの倍数の要素の指定するには、nth-child(even)もしくはnth-child(2n)。
nth-of-type(even)もしくはnth-of-type(2n)を使用します。
サンプルコードは下記です。
color: #000;
}
もしくは
ul li:nth-child(2n){
color: #000;
}
ul li:nth-of-type(even){
color: #000;
}
もしくは
ul li:nth-of-type(2n){
color: #000;
}
CSSで奇数の要素の指定方法
CSSでxの倍数の要素の指定するには、nth-child(odd)もしくはnth-child(2n-1)を使用します。
サンプルコードは下記です。
color: #000;
}
もしくは
ul li:nth-child(2n-1){
color: #000;
}
ul li:nth-of-type(odd){
color: #000;
}
もしくは
ul li:nth-of-type(2n-1){
color: #000;
}
CSSでx番目の要素の指定方法
CSSでxの倍数の要素の指定するには、nth-child(x)もしくはnth-of-type(x)を使用します。
サンプルコードは下記です。
color: #000;
}
ul li:nth-of-type(x){
color: #000;
}
CSSでxの倍数の要素の指定方法
CSSでxの倍数の要素の指定するには、nth-child(xn)もしくはnth-of-type(xn)を使用します。
サンプルコードは下記です。
color: #000;
}
ul li:nth-of-type(xn){
color: #000;
}
CSSでx番目以降の要素全ての要素の指定方法
CSSでx番目以降の要素全ての要素の指定するには、nth-child(n+x)もしくはnth-of-type(n+x)を使用します。
サンプルコードは下記です。
color: #000;
}
ul li:nth-of-type(n+x){
color: #000;
}
