要素が複数並んでいる状態で、数個を置きにstyleを変更する場合など、皆さんはどんな方法を使っていますか？
もし、その都度classを追加する方法を取られているなら、是非この記事をご一読ください。今回は、classを使わずcssのみで奇数、偶数、等間隔などを指定する方法をご紹介します。
設定方法は簡単ですし、その上ソースに無駄なclassを追加する必要がなくなるので一石二鳥です。
偶数・奇数にスタイルを適用する
偶数の背景色を赤で表示
html
<ul class="example1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-child(2n){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
偶数を指定する書き方として:nth-child(even)を使った書き方もあります。
上記と全く同じことを数式で表現したcssが:nth-child(2n)（２の倍数）になります。
奇数の背景色を赤で表示
html
<ul class="example2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-child(2n+1){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
奇数を指定する書き方として:nth-child(odd)を使った書き方もあります。
上記と全く同じことを数式で表現したcssが:nth-child(2n+1)（２の倍数の1番目）になります。
〇〇番目にスタイルを適用
前から３番目の背景色を赤で表示
html
<ul class="example3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-child(3){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
前から３番目を数式で表現するcssは:nth-child(3)になります。
後ろから３番目の背景色を赤で表示
html
<ul class="example3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-last-child(3){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
後ろからの場合は:nth-childでなく:nth-last-childを使います。
後ろから３番目を数式で表現するcssは:nth-last-child(3)になります。
〇〇以降、〇〇以前にスタイルを適用
前から３番目までの背景色を赤で表示
html
<ul class="example5"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-child(-n+3){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
前から３番目までを数式で表現するcssは:nth-child(-n+3)になります。
前から４番目以降の背景色を赤で表示
html
<ul class="example6"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-child(n+4){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
前から４番目以降を数式で表現するcssは:nth-child(n+4)になります。
後から３番目以降の背景色を赤で表示
html
<ul class="example5"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
css
.example1 li:nth-last-child(-n+3){
background:#f00;
}
結果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
後から３番目以降を数式で表現するcssは:nth-last-child(-n+3)になります。
:nth-child()と:nth-last-childの使い方まとめ
:nth-child(3n)３の倍数
:nth-child(3n+1)３の倍数の1番目
:nth-child(3)前から３番目
:nth-last-child(3)後ろから３番目を数式で表現する
:nth-child(-n+3)前から３番目まで
:nth-child(n+4)前から４番目以降を
:nth-last-child(-n+3)後から３番目まで