CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
Post on:2024年3月12日
sponsors
CSSでif～else文が使えたら、と思ったことはありませんか？
もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。
CSSでif～else文を実現するには、CSSのネストを使用します。
|
1 2 3 4 5 6 7 |
complex-selector { /* if-styles */ :not(&) { /* else-styles */ } } |
CSSのネストは、Chrome 112, Edge 112から利用でき、Safariも16.5から、Firefoxも117からサポートされています。
CSSのネストについて詳しくは、下記をご覧ください。
CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説
このCSSを使用すると、たとえばインライン要素にはブルーのボーダー、それ以外にレッドのボーダーを与えたいときに下記のように記述できます。
|
1 2 3 4 5 6 7 |
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を実行すると、下記のように表示されます。
元ネタは下記ポストより。
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
sponsors
