CSSだけでif～else文と同じことができる！しかもすべてのブラウザでサポートされています

Post on:2024年3月12日

sponsorsr

CSSでif～else文が使えたら、と思ったことはありませんか？
もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。

CSSだけでif～else文が使える！しかもすべてのブラウザでサポートされています

CSSでif～else文を実現するには、CSSのネストを使用します。

complex-selector {
  /* if-styles */

  :not(&) {
    /* else-styles */
  }
}

complex-selector {

/* if-styles */

:not(&) {

/* else-styles */

}

CSSのネストは、Chrome 112, Edge 112から利用でき、Safariも16.5から、Firefoxも117からサポートされています。

CSSのネストのサポートブラウザ

CSSのネストについて詳しくは、下記をご覧ください。

CSSのネストがついにブラウザで使用できるようになった！基礎知識、便利な使い方を詳しく解説

このCSSを使用すると、たとえばインライン要素にはブルーのボーダー、それ以外にレッドのボーダーを与えたいときに下記のように記述できます。

a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, label, mark, output, samp, span, strong, sub, sup, time, tt, var {
  outline: 1px dashed blue !important;

  :not(&) {
    outline: 1px dashed red !important;
  }
}

a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, label, mark, output, samp, span, strong, sub, sup, time, tt, var {

outline: 1px dashed blue !important;

:not(&) {

outline: 1px dashed red !important;

}

WebページでこのCSSを実行すると、下記のように表示されます。

Apple（日本）

元ネタは下記ポストより。

Realization: CSS Nesting also allows you to basically do "else" clauses in selectors.

complex-selector {
if-styles;

:not(&) {
else-styles
}
}

(if you’re wondering what this code is for, it’s for a bookmarklet to show element boxes for educational reasons) pic.twitter.com/zpZa6u4Xvt

— Lea Verou (@LeaVerou) February 12, 2024