HTML / CSS / jQuery コーディング

【CSS】nth-child() について


「:nth-child()」はCSS3のセレクタで、ある要素内で最初からn番目にスタイルを適用させることができます。

CSS3のためIE8まで対応していないようです。

 

例として、下記はリストの偶数番目の文字色を赤にしています。

リストの数が変わってもHTML側での編集が不要となるため、非常に便利です。

 

li:nth-child(even) {
color: #ff0000;
}

 

サンプルページはこちら

奇数の場合は「:nth-child(odd)」となります。

また、「:nth-child(2)」や「:nth-child(5)」とすると、2番目や5番目に適用させることができます。

 

 

-HTML / CSS / jQuery コーディング
-

© 2026 Web担当屋 ブログ