LoginSignup
1
1

More than 3 years have passed since last update.

擬似クラス`○○-child`を付ける位置について

Last updated at Posted at 2020-11-19

擬似クラス○○-childを付ける位置について

表題の通りです。
CSS3における疑似クラス○○-childfirst-childnth-childなど)は、
親要素ではなく子要素に対して付けます。

記述例:親要素divの3番めの子要素pの文字を赤色にする
div > p:nth-child(3) {
    color: red;
}

childなんてなってるものだから、親から見た相対位置で付けるのかなって思ってしまいがちですが、
つまり正しくはこういうことです。

例)nth-child(n)の相対関係
誤:親から見てn番目
正:兄弟から見てn番目

兄弟同士での相対関係なんだから、名前がbrotherとか、あるいはせめてchildrenとかの方がイメージしやすかったんじゃないかと思いましたがどうなんでしょう。

おまけ

ある要素のすべての子要素のうち、先頭の子要素を除外したい時は

親要素 > *:not(:last-child){ 修飾内容 }

のように、セレクタの*(すべての要素)と、「~以外」を表す:not()を組み合わせると良い

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1