:is(), :where() を活用してCSSを「後置修飾」で書く

はじめに結論から :is()または:where()を使うと、 これまで「前置修飾」で書かなきゃいけなかったセレクタが 「後置修飾」で書けて嬉しい！ /* 通常のスタイル */ .button {} /* 特定の要素と隣接するときのスタイル */ /* こう書いてたものが */ .link + .button {} /* こう書ける */ .button:is(.link + *) {} /* 特定の要素に内包されているときのスタイル */ /* こう書いてたものが */ header .button {} /* こう書ける */ .button:is(header *) {} /* 特に、「特定のクラスの中の要素に対するスタイル」を条件分岐させるときに便利 */ .container p {} .container p:is(h2 + *) {} .container p:is(secti