CSS基礎 練習問題 54:特定の条件を除外するセレクタ
クラスに「active」が付いて「いない」すべてのbutton要素に対してスタイルを適用したい場合、正しいCSSセレクタの書き方はどれか。
- button:except(.active)
- button:not(.active)
- button:without(.active)
- button:exclude(.active)
- button:unless(.active)
正解と解説を見る
正解:button:not(.active)
特定のクラスや属性を持たない要素を指定するには、否定疑似クラスの `:not()` を使用するのが正解です。
【正解の理由】
`:not(セレクタ)` を使うことで、括弧内に指定した条件に一致「しない」要素だけを対象にスタイルを適用できます。
【不正解の理由】
• `button:except(.active)` は、`except` という疑似クラスはCSSの仕様に存在しないため無効である
• `button:without(.active)` は、`without` という疑似クラスは存在しないため適用されない
• `button:exclude(.active)` は、`exclude` という指定方法は存在しないため構文エラーとなる
• `button:unless(.active)` は、プログラミング言語の条件文のような書き方であり、CSSセレクタとしては不正である