問題 × 解決策

要素の奇数、偶数にCSSを適用させる方法

問題

要素の奇数、偶数にCSSを適用させたい

解決策

  • 「奇数」 … 「:nth-child(odd)」で指定する。
  • 「偶数」 … 「nth-child(even)」で指定する。

奇数のみ、偶数のみ

要素を奇数の場合のみ、偶数の場合のみに適用させたい場面はたくさん出てきます。
その場合の方法をご紹介します。

「奇数」の実装方法

HTMLの構築を行います。

ulタグを構築します。
便宜上、ここではulタグに「oddlist」というクラスを設定しています。

<ul class="oddlist">
<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タグのクラス「oddlist」の中のliタグに対し、「:nth-child(odd)」と設定することで、「奇数番目」のliタグを指定することができます。
例として、文字色をオレンジ色に設定します。

.oddlist > li:nth-child(odd){
	color: #F15A24;
}

DEMOはこちら

  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目
  • 8番目
  • 9番目
  • 10番目

「偶数番目」の実装方法

HTMLの構築を行います。

Ulタグを構築します。
便宜上、ここではulタグに「evenlist」というクラスを設定しています。

<ul class="evenlist">
<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タグのクラス「evenlist」の中のliタグに対し、「:nth-child(even)」と設定することで、「偶数番目」のliタグを指定することができます。
例として、文字色をオレンジ色に設定します。

.evenlist > li:nth-child(even){
	color: #F15A24;
}

DEMOはこちら

  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目
  • 8番目
  • 9番目
  • 10番目

コメント

コメントを残す

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

four × five =

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

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