ec-cube CSSで奇数や偶数などの要素にだけスタイルを設定する方法

表やリストで、交互に背景の色が違うのってよく見かけますよね。
交互に背景色を変えるだけでも、特に表は見やすさが断然変わってきます。

今回は「CSSで奇数や偶数などの要素にだけスタイルを設定する方法」をご紹介します。

まずは基本となるコードです。

HTML

<ul>
 <li>あいうえお</li>
 <li>かきくけこ</li>
 <li>さしすせそ</li>
 <li>たちつてと</li>
 <li>なにぬねの</li>
</ul>


まぁ、何の変哲もない普通のリストですね。
これに色々なスタイルを適応させてみましょう。


奇数番目の要素にだけ適応させる
CSS
li:nth-child(odd){
	background:#E6F5AF;
}


RESULT
  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの


偶数番目の要素にだけ適応させる
CSS
li:nth-child(even){
	background:#E6F5AF;
}


RESULT
  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの


最初の要素にだけ適応させる
CSS
li:first-child{
	background:#E6F5AF;
}


RESULT
  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの


最後の要素にだけ適応させる
CSS
li:last-child{
	background:#E6F5AF;
}


RESULT
  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの


上からn番目の要素にだけ適応させる
CSS
li:nth-child(3){
	background:#E6F5AF;
}


RESULT
  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの

ここでは3番目の要素にのみスタイルを適用させています。
数字を変えれば、好きなところにのみ適応させることができます。


>>こちらのサイトを参考にさせていただきました。
https://keikenchi.com/css-style-n