複数要素の 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() の複数要素指定といった便利な機能も使えるようになりました。 本記事では、各機能の基礎から使い方までを、実例を交えて紹介します。 :is()とは何か? :where()とは何か? :not()とは何か? :is()
![使ってますか? CSSの:is()と:not()で複数セレクタ管理をラクにしよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/ccf715d56a6a2470d55ea2339e42dd276a6f7ab9/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Ftechfeed%2Fimage%2Fupload%2Fw_1200%2Ch_630%2Cc_fill%2Fentries%2Fdgw6fk81zvaczp18kazm.png)