疑似クラスnth-child() 「n番目」の数え方のルール

疑似クラスnth-child()は「要素:nth-child()」の他、「セレクタ:nth-child()」という使い方ができる。

しかし「n番目」を数えるときは、「セレクタ単位」ではなく「セレクタが付いている要素単位」である。

.blue:nth-child()が効かない

HTML
CSS

.blue:nth-child()が効く

HTML
CSS

おまけ : 親が異なるとき

以下の場合は、「li.red」と「li.blue」は異なるul要素の子なので、それぞれ「1~3番目」でも問題ない。

HTML
CSS

コメントを残す

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