経験知ロゴ

CSSで奇数、偶数、最初、最後、n番目の要素にだけスタイルを設定する方法

奇数偶数番目に要素を指定
HTML+CSSでテープルやリストなど、奇数あるいは偶数番目の要素だけ色を変えたり、最後の要素だけボーダーを付けないようにしたい場合があります。

それらはCSS3で追加された「nth-child」擬似クラスを使うことで実装することが可能ですので、その方法をリストタグで紹介します。(IEはIE9以降対応)

奇数番目の要素にだけ適用

li:nth-child(odd){
 適用したいスタイル
}

偶数番目の要素にだけ適用

li:nth-child(even){
 適用したいスタイル
}

最初の要素にだけ適用

li:first-child{
 適用したいスタイル
}

最後の要素にだけ適用

li:last-child{
 適用したいスタイル
}

上からn番目の要素にだけ適用

li:nth-child(3){
 適用したいスタイル
}

この場合上から3番目の要素にだけ適用される。数字を変えればその場所の要素だけ適用される。

上からnつの要素だけに適用

li:nth-child(-n+3) {
 適用したいスタイル
}

この場合上から3つの要素にだけ適用される。「-n」にすることに注意。

上からn番目以降の要素にだけ適用

li:nth-child(n+4) {
 適用したいスタイル
}

この場合4番目以降の要素にだけ適用される。

下からn番目の要素にだけ適用

li:nth-last-child(3){
 適用したいスタイル
}

この場合上から3番目の要素にだけ適用される。

下からnつの要素にだけ適用

li:nth-last-child(-n+3) {
 適用したいスタイル
}

この場合下から3つ目の要素にだけ適用される。「-n」にすることに注意。

下からn番目以前の要素にだけ適用

li:nth-last-child(n+4) {
 適用したいスタイル
}

この場合下から4つ目以前の要素にだけ適用される。

Xの倍数番目の要素にだけ適用

li:nth-child(3n) {
 適用したいスタイル
}

この場合3の倍数番目(3、6、9、12…)の要素にだけ適用される。

li:nth-child(3n+1) {
 適用したいスタイル
}

このようにすると3の倍数に1を足した数番目(1、4、7、10…。)の要素にだけ適用される。

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか?

  • 自分の趣味に全力を注ぐ
  • 家族との時間を増やし、子供の成長をしっかりと見守る
  • 毎週海外へ旅行へ行く
  • 新しいことに挑戦する
  • 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね!

週2日の休みが増えるということは、

52週(1年) × 2日 = 104日

年間104日も増え、365日のうち208日も自分の時間に使えるのです!

更に、今30歳だとして、65歳まで働いたら、

104日 × 35年 = 3,640日

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか?

週4日の自由たった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう!

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!

おわりに

いろいろなパターンで指定できるようになり、CSSのデザインの幅が広がっています。

個人的にはIF文を使った分岐が出来ると嬉しいです。(PHPやjavascriptを使わずに)

▼役に立ったらシェアをお願いします