要素の表示/非表示の切り替えには:not を使う
なるほど言われてみればその通りだ。
特定の領域にCSSクラスを追加・削除して表示・非表示を切り替えることがあるが、この際にdisplay:noneとdisplay:blockの両方を指定していることが多い。
:notを使用すればdisplay:noneの指定だけで済むため前述の指定方法は無駄だ。
/* bad */ .content { display: none; } .content.open { display: block; } /* good */ .content:not(.open) { display: none; }