擬似クラス（:nth-child()、:first-letter等)

nth-child

table td:nth-child(2){}とすると、2列目のtdを指定でき、table tr:nth-child(2){}とすると2行目のtrを指定できる。

nth-child(2)を指定

/*css*/
table#m1 td:nth-child(2){
	background:#aaf;
	}
table#m7 tr:nth-child(2){
	background:#aaf;
	}
ul#m6 li:nth-child(2){
	background:#aaf;
	}

• いちご
• りんご
• すいか

nth-child(2n)を指定

table tr:nth-child(2n){}とすると偶数番目を指定できる。nは０から始まる。他、even（偶数）、odd（奇数）を入れることも可能

/*css*/
table#m2 tr:nth-child(2n){
	background:#aaf;
	}

first-child

first-childを指定

table td:first-child{}とすると、1列目のtdを指定でき、table tr:first-child{}とすると1行目のtrを指定する。

/*css*/
table#m3 tr:first-child{
	background:#aaf;
	}

last-child

last-childを指定

table tr:last-child{}とすると、最終行のtrを指定できる。

/*css*/
table#m8 tr:last-child{
	background:#aaf;
	}

nth-of-type

nth-of-type(2n)を指定

table tr:nth-of-type(2n){}とすると偶数番目を指定できる。nは０から始まる。nth-childとの違いは、兄弟要素のみに対して順番をふるということ。テーブルではなくdl要素のように同じ階層にdtとddが連続して存在するような場合は、dtとddが同じようにカウントされるので、dl:nth-of-type(2)とすると、dtではなく最初のddが選択される？

/*css*/
table#m4 tr:nth-of-type(2n){
	background:#aaf;
	}

first-of-type or last-or-type

first-of-typeを指定

table tr:first-of-type{}とすると、first-childと同じ挙動を示す。

/*css*/
table#m9 tr:first-of-type{
	background:#aaf;
	}

参考csstricks

:first-lettrer

擬似要素だけどここで解説

/*css*/
p.m5:first-letter {
	background:#aaf;
	}

最初の文字にだけ赤スタイルを適用する

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>