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