Categories
SugiBlog ホームページ制作・システム開発|大阪

CSS nth-childセレクタ

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を使用します。

845 views

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です