要素の表示/非表示の切り替えには:not を使う

なるほど言われてみればその通りだ。

特定の領域にCSSクラスを追加・削除して表示・非表示を切り替えることがあるが、この際にdisplay:noneとdisplay:blockの両方を指定していることが多い。

:notを使用すればdisplay:noneの指定だけで済むため前述の指定方法は無駄だ。

/* bad */
.content {
  display: none;
}
.content.open {
  display: block;
}
/* good */
.content:not(.open) {
  display: none;
}

以下から丸パクリ 意外と知られていないCSSのmargin:0 autoなどの無駄な指定 | iwb.jp