CSS基礎 練習問題 48:セレクタ:特定の順番の要素の指定
リスト要素(liなど)が複数並んでいる中で、偶数番目の要素だけに背景色を付けたい場合、対象を絞り込むための正しいCSSの書き方はどれか。
- li:child-even という疑似クラスを使用して、要素が偶数番目であることを直接指定する。
- li:even-child という疑似クラスを使用して、要素が偶数番目であることを直接指定する。
- li:nth-child(even) という疑似クラスを使用して、要素が偶数番目であることを指定する。
- li[child="even"] という属性セレクタを使用して、要素が偶数番目であることを指定する。
- li::even-element という疑似要素を使用して、要素が偶数番目であることを直接指定する。
正解と解説を見る
正解:li:nth-child(even) という疑似クラスを使用して、要素が偶数番目であることを指定する。
リスト要素などの並びの中で、偶数番目(または奇数番目)の要素だけを対象にする場合は、`:nth-child(even)`などの疑似クラスを使用する書き方が正解です。
【正解の理由】
CSSにおいて、兄弟要素の中で特定の順番にある要素を選択するには`:nth-child()`疑似クラスを使用します。括弧の中に`even`(偶数)や`odd`(奇数)、あるいは`2n`などの数式を入れることで、柔軟に順番を指定できます。
【不正解の理由】
• 「`:child-even`という疑似クラスを使用して」という説明は、そのような名前の疑似クラスが存在しないため誤り
• 「`:even-child`という疑似クラスを使用して」という説明は、そのような名前の疑似クラスが存在しないため誤り
• 「`[child="even"]`という属性セレクタを使用して」という説明は、HTML要素に直接そのような属性が書かれているわけではないため誤り
• 「`::even-element`という疑似要素を使用して」という説明は、そのような名前の疑似要素が存在しないため誤り