CSSでリストやボックスを連続して作っている時、最後だけボーダーが入らないようにしたい、偶数の部分は色をつけたい等の場合が結構あります。
その場合に個別にクラスを充てたりする方法もありますがCMSで出力されていてhtmlは触れないという時や後からコンテンツの数が増えたりした場合に修正しなければいけません。
擬似 クラスの【 nth-child 】を使えば部分毎にクラスをあてなくてもスマートに対応する事が出来ます。
<ul>
<li>最初の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
<li>5番目の要素</li>
<li>最後の要素</li>
</ul>
li:first-child{
ここに適用したいスタイルを入れる
}
li:last-child{
ここに適用したいスタイルを入れる
}
続いて奇数や偶数番目にだけ適用する方法です。
例えば1列ごとに背景色を変えれば視覚的に見やすい表等が作れます。
li:nth-child(odd){
ここに適用したいスタイルを入れる
}
li:nth-child(even){
ここに適用したいスタイルを入れる
}
続いて〇番目だけ、〇番目以降、上から〇番目まで適用する方法です
例えば上から〇番目まで色を変えて目立たせたりといった事が可能です。
li:nth-child(3){
ここに適用したいスタイルを入れる
}
(3)で3番目という意味です。
li:nth-child(-n+3) {
ここに適用したいスタイルを入れる
}
(-n+3) で上から3つまでは適用されます。
li:nth-child(n+3) {
ここに適用したいスタイルを入れる
}
(n+3) で3番目以降に適用されます。
li:nth-last-child(3){
ここに適用したいスタイルを入れる
}
(3)で3番目という意味です。
li:nth-last-child(n+3) {
ここに適用したいスタイルを入れる
}
(n+3) で下から3つ以前の要素に適用されます。
li:nth-last-child(-n+3) {
ここに適用したいスタイルを入れる
}
(-n+3)下から3つの要素にだけ適用されます。
最後に指定の倍数に適用する方法です。
li:nth-child(3n) {
ここに適用したいスタイルを入れる
}
(3n)だと3の倍数の要素にだけ適用されます。
もちろん、liだけじゃなく他の要素でも使えますので色々と応用が効きます!
WEBディレクター、デザイナー、フロントエンドエンジニア、投資家、会社オーナー
2007年に同志と起業、2009年に法人化、2018年にHira's.netを設立。
WEBデザイン、コーディング、ディレクター等WEB制作全般に幅広く携わっています。