無理やり :is() 擬似クラスで詳細度バトルに勝つ！！

クラスの付与を最小限に保ってCSSを記述していると、思わぬスタイルが全く別の場所からあたり上書きできないことがあります。

.a {
  color: black;
}

/* 別ファイルで編集できない場所に、こういったセレクタが書かれていたとします */
.a.b.c.d {
  color: blue;
}

/* このセレクタは詳細度が低いため採用されません */
.a.e {
  color: red;
}

そこで :is()擬似クラスの登場です。:is()はカッコ内に記述されたセレクタ中で、一番詳細度の強いものが採用されるという仕様があります。

存在しないidを突っ込んでみるとどうでしょうか。

.a {
  color: black;
}

.a.b.c.d {
  color: blue;
}

/* ありえないIDセレクタをぶちこみます */
.a:is(.e, #sonnaidnaiyozesttai) {
  color: red;
}

やった、勝ちました！

コレを覚えてあなたも詳細度バトルに勝利しましょう（絶対にやめましょう。）