HTML&CSS

【css】偶数と奇数の要素にスタイルを当てよう！

css偶数の要素にスタイルをあてよう
ニャンコ
ニャンコ

偶数や奇数番目にある要素にスタイルを当てる方法を教えて！

偶数番目と奇数番目に要素を当てるには「even」と「odd」を使用するといいね。
具体的な例を紹介するね。

ワンコ
ワンコ

ウェブデザインにおいて、要素の偶数番目と奇数番目に異なるスタイルを適用することは、ページの見た目を活発にし、情報の整理を助ける方法の一つです。

この記事では、HTMLとCSSを使用して要素の偶数番目と奇数番目にスタイルを当てる方法について解説します。

方法1: nth-childセレクタを使用する

最も一般的で簡単な方法は、CSSのnth-childセレクタを使用する方法です。このセレクタを使用すると、要素の位置に基づいてスタイルを適用することができます。

偶数、奇数の要素にスタイルを適用する方法

まず、偶数番目の要素にスタイルを適用する方法を見てみましょう。以下のようなHTMLのリストがあるとします。

<ul>
  <li>要素1</li>
  <li>要素2</li>
  <li>要素3</li>
  <li>要素4</li>
  <li>要素5</li>
</ul>
li:nth-child(even) {
  /* 偶数番目の要素に適用するスタイル */
  background-color: red;
}

li:nth-child(odd) {
  /* 奇数番目の要素に適用するスタイル */
  background-color: bule;
}
  • 要素1
  • 要素2
  • 要素3
  • 要素4
  • 要素5

偶数を指定したい場合は 「even」
奇数を指定したい場合は「odd」

どっちがどっちか分からなくなった場合は、下記の事を覚えておくとよいでしょう。
「odd」 → 3文字 →　奇数
「even」 → 4 文字 →　偶数

方法2: nth-of-typeセレクタを使用する

nth-childセレクタは、親要素内の全ての要素に対して適用されるため、要素の種類に関係なくスタイルが適用されます。

もし特定の要素のみにスタイルを適用したい場合は、nth-of-typeセレクタを使用します。

以下の例では、偶数番目にあるp要素のみにスタイルを当てた例です。
span要素が偶数番目にありますが、スタイルがあたっていないのが分かると思います。

<div class="container">
  <p>p要素1</p>
  <p>p要素2</p>
  <p>p要素3</p>
  <span>span要素1</span>
  <p>p要素4</p>
  <p>p要素5</p>
</div>
.container p:nth-of-type(even) {
  /* 偶数数番目の<p>要素に適用するスタイル */
  background-color: red;
}

p要素1

p要素2

p要素3

span要素1

p要素4

p要素5

番外編：倍数の要素にスタイルを当てる

偶数や奇数とは違いますが、倍数の要素にスタイルを当てたいこともあると思います。
たとえば、2の倍数の要素、3の倍数の要素にだけスタイルをあてるなどです。

こちらも併せて覚えておくと便利なので、しっかり理解しましょう。

2の倍数にスタイルを当てる

<ul>
  <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>
</ul>
li:nth-child(2n) {
  background-color: #c1c1c1;
  color: #333;
}
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
  • アイテム6
  • アイテム7
  • アイテム8
  • アイテム9

3の倍数にスタイルを当てる

<ul>
  <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>
</ul>
li:nth-child(3n) {
  background-color: #c1c1c1;
  color: #333;
}
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
  • アイテム6
  • アイテム7
  • アイテム8
  • アイテム9

「ｎ」はnatural numberの頭文字をとっており、整数を表します。

まとめ

要素の偶数番目と奇数番目にスタイルを適用する方法を2つ紹介しました。

nth-childセレクタを使用すれば、要素の位置に基づいてスタイルを適用できます。
また、nth-of-typeセレクタを使用すれば、特定の要素のみにスタイルを適用することができます。
これらの方法を使って、ページのデザインや要素の視覚的な整理を行いましょう。

以上が要素の偶数番目と奇数番目にスタイルを当てる方法についての解説でした。
この方法を活用して、あなたのウェブサイトやブログの見た目を魅力的にカスタマイズしてください。

-HTML&CSS
-,