問題
nth-childで「何番目まで」「何番目以降」に対してCSSを設定したい
解決策
- 「何番目まで」 … 「:nth-child(-n+〇)」で指定する。
- 「何番目以降」 … 「nth-child(n+〇)」で指定する。
nth-childはとても便利!
nth-childは様々な指定が可能です。偶数の順番のものや奇数の順番のものを指定して、CSSを設定することができます。そんな中で、〇番目までにCSSを設定したい時や、〇番目以降にCSSを設定したい時の指定方法を解説します。
「何番目まで」の実装方法
HTMLの構築を行います。
例として、「5番目まで」として設定します。
ulタグを構築します。
便宜上、ここではulタグに「until05」というクラスを設定しています。
<ul class="until05">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li>6番目</li>
<li>7番目</li>
<li>8番目</li>
<li>9番目</li>
<li>10番目</li>
</ul>
次にCSSの構築を行います。
ulタグのクラス「until05」の中のliタグに対し、「:nth-child(-n+5)」と設定することで、「5番目まで」のliタグを指定することができます。
例として、文字色をオレンジ色に設定します。
.until05 > li:nth-child(-n+5){ color: #F15A24; }
DEMOはこちら
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
- 8番目
- 9番目
- 10番目
「何番目以降」の実装方法
HTMLの構築を行います。
例として、「5番目以降」として設定します。
Ulタグを構築します。
便宜上、ここではulタグに「later05」というクラスを設定しています。
<ul class="later05">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li>6番目</li>
<li>7番目</li>
<li>8番目</li>
<li>9番目</li>
<li>10番目</li>
</ul>
次にCSSの構築を行います。
ulタグのクラス「later05」の中のliタグに対し、「:nth-child(n+5)」と設定することで、「5番目以降」のliタグを指定することができます。
例として、文字色をオレンジ色に設定します。
.later05 > li:nth-child(-n+5){ color: #F15A24; }
DEMOはこちら
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
- 8番目
- 9番目
- 10番目
コメント