カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

CSS nth-childセレクタ

この記事は最終更新日から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を使用します。

この記事がお役に立ちましたらシェアお願いします