表やリストで、交互に背景の色が違うのってよく見かけますよね。
交互に背景色を変えるだけでも、特に表は見やすさが断然変わってきます。
今回は「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