問題
要素の奇数、偶数に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番目
コメント