擬似クラス○○-child
を付ける位置について
表題の通りです。
CSS3における疑似クラス○○-child
(first-child
やnth-child
など)は、
親要素ではなく子要素に対して付けます。
記述例:親要素divの3番めの子要素pの文字を赤色にする
div > p:nth-child(3) {
color: red;
}
childなんてなってるものだから、親から見た相対位置で付けるのかなって思ってしまいがちですが、
つまり正しくはこういうことです。
例)nth-child(n)の相対関係
誤:親から見てn番目
正:兄弟から見てn番目
兄弟同士での相対関係なんだから、名前がbrotherとか、あるいはせめてchildrenとかの方がイメージしやすかったんじゃないかと思いましたがどうなんでしょう。
おまけ
ある要素のすべての子要素のうち、先頭の子要素を除外したい時は
親要素 > *:not(:last-child){ 修飾内容 }
のように、セレクタの*
(すべての要素)と、「~以外」を表す:not()
を組み合わせると良い