cssで特定箇所のみにスタイリングしたい場合に効率的にかっこよく書ける疑似クラス特集です。
奇数番目
１，３，５，７，９…番目を装飾する時
li:nth-child(odd) { color: #82fcc9;}
- リスト（奇数）
- リスト（偶数）
- リスト（奇数）
- リスト（偶数）
- リスト（奇数）
- リスト（偶数）
- リスト（奇数）
偶数番目
２，４，６，８…番目を装飾する時
li:nth-child(even) { color: #82fcc9;}
- リスト（奇数）
- リスト（偶数）
- リスト（奇数）
- リスト（偶数）
- リスト（奇数）
- リスト（偶数）
- リスト（奇数）
上からn番目
li:nth-child(4) { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
下からn番目
li:nth-last-child(2) { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
最初の要素
li:first-child { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
最後の要素
li:last-child { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
最初からn番目まで
li:nth-child(-n+3) { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
n番目から最後まで
li:nth-child(n+4) { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
最後からn番目まで
li:nth-last-of-type(2) { color: #82fcc9;}
- リスト（１）
- リスト（２）
- リスト（３）
- リスト（４）
- リスト（５）
- リスト（６）
- リスト（７）
コメント