CSSで何番目・偶数・奇数の要素にプロパティを適用させる方法
CSSの擬似クラスを使用してプロパティを適用させる。
擬似クラスとは、セレクターに、コロン（ : ）をつけたものを指します。
擬似クラスの例は、:hoverや:checkedが有名かと思います。
何番目・偶数・奇数を指定する擬似クラス一覧
| 指定範囲 | -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で最初の要素の指定方法
ul li:first-child{
color: #000;
}
ul li:first-of-type{
color: #000;
}
color: #000;
}
ul li:first-of-type{
color: #000;
}
CSSで最後の要素の指定方法
ul li:last-child{
color: #000;
}
ul li:last-of-type{
color: #000;
}
color: #000;
}
ul li:last-of-type{
color: #000;
}
CSSで偶数の要素の指定方法
ul li:nth-child(even){
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;
}
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で奇数の要素の指定方法
ul li:nth-child(odd){
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;
}
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番目の要素の指定方法
ul li:nth-child(x){
color: #000;
}
ul li:nth-of-type(x){
color: #000;
}
color: #000;
}
ul li:nth-of-type(x){
color: #000;
}
CSSでxの倍数の要素の指定方法
ul li:nth-child(xn){
color: #000;
}
ul li:nth-of-type(xn){
color: #000;
}
color: #000;
}
ul li:nth-of-type(xn){
color: #000;
}
CSSでx番目以降の要素全ての要素の指定方法
ul li:nth-child(n+x){
color: #000;
}
ul li:nth-of-type(n+x){
color: #000;
}
color: #000;
}
ul li:nth-of-type(n+x){
color: #000;
}
nth-childとnth-of-typeの違い
nth-childとnth-of-typeは、要素の数え方に違いがあります。
nth-childは、親要素内のすべての兄弟要素の位置に従って子要素を選択しますが、nth-of-typeは、nth-of-typeは指定したセレクタのみを数えます。
nth-childの場合
あいうえお
あいうえお
あいうえお
nth-of-typeの場合
あいうえお
あいうえお
あいうえお
指定したCSS
.child div:nth-child(2){
color:red;
}
.of-type div:nth-of-type(2){
color:red;
}
color:red;
}
.of-type div:nth-of-type(2){
color:red;
}
our note サービス一覧
our noteはブログに加えて、下記のサービスを行っております。
バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。
また、私が制作したLINEスタンプの販売も行っております。
詳細は、下記をご覧ください。
ココナラ
「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。
品質を担保するため、最大2案件までとさせていただいております。
案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。
ココナラ