使ってますか? CSSの:is()と:not()で複数セレクタ管理をラクにしよう複数要素のa:hoverとa:focusにスタイルをあてるとき、長くて重複だらけのコードを書いていませんか? 今回はすっきりと短く書ける:is()と:not()の使い方を紹介します。 複数要素の a:hover と a:focus にスタイルをあてたいとき、次のようなコードを書いていませんか？ .section1 a:hover, .section1 a:focus, .section2 a:hover, .section2 a:focus { color: lightpink; } :is() という擬似クラス関数を使えば、短く、重複のないコードが書けます。 :is(.section1, .section2) a:is(:hover, :focus) { color: lightpink; } また、:is() と同時期に、:where() や :not() の複数要素指定といった便利な
