問題 × 解決策

nth-childで「何番目まで」「何番目以降」に対してCSSを設定する

問題

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番目

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

13 − five =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧