CSSセレクタに関するメモ

CSSセレクタについてのメモ。

実際のサイトのセレクタはグループセレクタや子孫セレクタが多く使われてる。
できるだけ効率よく、後からでも直せるような工夫もされてると感じる。

そんなセレクタで、戸惑ったものをメモしておく。

【子セレクタ
.sec01 .group > img
親要素の直下の子要素を選択する。

【:last-child】
:last-childを複数指定するときはこう。カンマで区切ってそれぞれに:last-childを付けるのを忘れない。

.sec01 .group01 img:last-child, .sec01 .group02 img:last-child {
margin-right: 0;
}

【.group.area】
このように.で続けて指定するパターン。
groupとarea、2つのクラス名を両方持つ要素に対して。
<div class=group area></div>
半角スペースを空けて区切る子孫セレクタと混同しないように!

ゼロからコーディングする時は、CSSセレクタを綺麗にまとめられるかを大事にしないとだなー。