CSS nth-childセレクタ
- 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を使用します。
この記事がお役に立ちましたらシェアお願いします
2,258 views




