cssで特定の要素以外を非表示にする

概要

以下のようなHTMLで

<div class="main">
  <div class="deactive1">あ</div>
  <div class="deactive2">い</div>
  <div class="deactive3">う</div>
  <div class="deactive4">え</div>
  <div class="deactive5">お</div>
  <!-- 上の全ての要素を非表示にしたい -->
  <div id="app">
    vueとかで作ったアプリケーション
  </div>
</div>

.main内の#app以外の要素を非表示にしたいが、classもidもめちゃめちゃでセレクターで指定できない時があります。

そこで、not擬似クラスを使用して#app以外の要素にdisplay: noneを適用するcssを書いてみます

• :not() - CSS: カスケーディングスタイルシート | MDN

実装

.main>*:not(#app) {
    display: none;
}

これで以下のような感じになるはずです！

まとめ

意外にググっても出てこなかったのでまとめてみました。

SSIなどでHTMLがサーバーで自動挿入されるような場面で使えるのではないでしょうか？(実際に僕はそうでした)