CSS

is() lets you group multiple selectors and style them at once, so you can write shorter and cleaner CSS when many elements share the same rules.

:is()

複数のセレクターをひとまとめにして『この中のどれでも当てていいよ』という感じでCSSを短く書けるしくみで、同じスタイルをいろんな要素へラクに広げられる。

:is() とは？

CSS の :is() は、「まとめて書ける便利なグループ分け」だと思うと分かりやすいです。

例えば、h1 と .title と .big-text に同じスタイルを当てたいとき、本来ならこうなります。

CSS

h1,
.title,
.big-text {
    color: red;
}

書けますが、長くなりますよね。

:is() を使うと、こうなります。

CSS

:is(h1, .title, .big-text) {
    color: red;
}

たった1行で、同じ意味になります。

つまり、「この中のどれかに当てて」という書き方です。

さらに便利なのは、li a, nav a, .footer a のように、同じ後ろに続く書き方が出てきた時です。

CSS

:is(li, nav, .footer) a {
    text-decoration: none;
}

この場合、

全部に効きます。

同じ書き方が何行も続くと読みにくくなるので、:is() を使うと読みやすく、整理されたCSSになります。

特に大きいサイトではすごく役立ちます。