- CSS
- 2012-11-27
この記事は最終更新日から1年以上経過しています。
n番目や偶数・奇数の要素にスタイルシートを適用させたいとき、nth-childセレクタを使用します。
ここでは、テーブルを例にやってみます。
偶数行の背景色を指定する
table tr:nth-child(even) { background: #f5f5f5; }
奇数行の背景色を指定する
table tr:nth-child(odd) { background: #cbcbcb; }
2行目の文字色を指定する
table tr:nth-child(2) { color: #ff6347; }
3行毎に文字色を指定する
table tr:nth-child(3n) { color: #2626ff; }
ちなみに、最初と最後の要素を指定するにはそれぞれ、:first-child・:last-childを使用します。