【入門編】 is関数型疑似クラス – CSS実践ガイド

こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトです。

CSSを書き始めた頃って、セレクタの書き方だけでお腹いっぱいになりませんか？「あれ、効かないな？」と思って調べたら、詳細度（点数のようなもの）が足りなくて負けていた……なんて、誰もが通る涙ぐましい通過点です。

今日は、そんなCSSの面倒くさいルールをそっと優しく包み込んでくれる、最高にクールで便利な仲間`:is()`関数型疑似クラスについてお話ししますね。

難しく聞こえるかもしれませんが、大丈夫ですよ。ゆっくり紐解いていけば、明日からあなたのコードをスッキリ劇的に変えてくれる魔法の杖になりますから。

—

1. そもそも `:is()` ってなんだろう？（お買い物の例え話）

突然ですが、スーパーでお買い物をするシーンを想像してください。
「りんご」と「みかん」と「バナナ」を買いたいとします。

昔ながらのCSSで、これらすべてに「赤や黄色のカゴ（スタイル）に入れよう！」と指示しようとすると、こう書く必要がありました。

/ 昔ながらの書き方：おんなじ指示を何度も書くめんどくささ /
section.fruit li.apple { color: orange; }
section.fruit li.orange { color: orange; }
section.fruit li.banana { color: orange; }

「うわ、長い……！ 打ち間違えそう！」って思いますよね。
これをスマートにまとめるために使われてきたのが、カンマ（,）で繋ぐ書き方です。

/ カンマで繋ぐ書き方 /
section.fruit li.apple,
section.fruit li.orange,
section.fruit li.banana {
color: orange;
}

これでもだいぶスッキリしますが、もしセレクタの親がもっと長くなったり複雑になったりすると、同じ記述を何度も繰り返すハメになります。「もっと一言で『この中のどれか！』って指定できたら楽なのに……」

そこで登場するのが、`:is()` です。
お買い物カゴに「『りんご、みかん、バナナ』のどれかを入れてね！」とひとまとめにお願いできる、すごく親切なカゴだとイメージしてください。

/ :is() を使ったスマートな書き方 /
section.fruit :is(.apple, .orange, .banana) {
color: orange;
}

どうですか？ 一気にコードの見通しが良くなりましたよね！

—

2. つまづきポイントを優しくフォロー：「詳細度」の魔法

さて、ここからが `:is()` の本当のすごろくの裏ワザ、いや、チーフアーキテクトとしての腕の見せ所です。
CSS初心者泣かせの「詳細度（点数レース）」のお話をします。

CSSは、セレクタの「強さ（詳細度）」によって、どちらのスタイルを優先するかを競い合っています。クラス名なら10点、ID名なら100点、みたいなイメージです。

通常、長いセレクタを書けば書くほど、点数が高くなって後から上書きしにくくなります。これが現場の保守を悩ませる原因なんです。

ですが、`:is()` の中に入れたセレクタたちは、その詳細度が「一番強いやつの点数」になりつつも、`:is()` 自体は「0点」として扱われるという、ちょっと特殊なルールを持っています。

言葉だと難しいので、例を見てみましょう。

/ :is() の中がどう評価されるか /
.header :is(a, .button, #special-id) {
background-color: pink;
}

この場合、一番強いのは `#special-id`（IDなので100点満点中かなりの高得点）ですよね。
なんと、`:is()` を使っていれば、中にどんなに強いセレクタが混ざっていようとも、「全体として一番強いやつの点数」をその場で柔軟に採用しつつ、コードを短く保てるんです。

「あれにしようか、これにしようか迷ったら、一番強いやつに合わせてあげるね。でも見た目はスッキリさせておくよ！」という、なんとも優しい気遣いができる子なんですよ、`:is()` は。

—

3. 実務で使える！コピペOKのサンプルコード

百聞は一見にしかず。現場で本当によく使うシチュエーションで、`:is()` の便利さを体感してみましょう。

例えば、ブログの記事本文エリア（`article`）の中にある、いろんな見出しやリストに、特定のホバー効果（マウスを乗せたときの動き）をまとめてつけたいとき。

以下のコードを、あなたのエディタにコピペして試してみてください。

/ — ここからCSS — /

.post-content {
font-family: sans-serif;
line-height: 1.6;
color: #333;
}

/
【ポイント】
「h2、h3、li、a」のどれかにマウスが乗ったとき（hover）、
文字の色をパッと明るいオレンジに変える！
これを :is() で一網打尽にします。
/
.post-content :is(h2, h3, li, a):hover {
color: #ff6b6b;
transition: color 0.3s ease; / ふわっと変化させるおまじない /
}

/ リンクだけに特別な下線を引くなども組み合わせ可能 /
.post-content a:is(:hover, :focus) {
text-decoration: underline;
}

どうでしょう？
もし `:is()` がなかったら、`.post-content h2:hover, .post-content h3:hover, .post-content li:hover, .post-content a:hover` と、気の遠くなるような長文を書かなければいけませんでした。
それがこんなにコンパクトにまとまるなんて、感動的ですよね。

—

4. チーフアーキテクトからのメッセージ

CSSの機能は日進月歩で進化しています。「昔の書き方じゃないとダメなんじゃないか」「新しい書き方は難しそう」と身構えてしまう気持ち、とてもよく分かります。

でも、安心してください。
今日お話しした `:is()` は、あなたのコーディングの面倒くさい繰り返しを減らし、未来の自分（や一緒に働く仲間）がコードを読み解く時間を圧倒的に短縮してくれる、最高に優しいツールです。

まずは小さなパーツ、例えばボタンのホバー状態のまとめなどに、そっとこの `:is()` を取り入れてみてください。
「おっ、なんかCSSを書くのがちょっと楽しくなったかも」――そう思えた瞬間から、あなたはもう立派なフロントエンドの旅人です。

それでは、また次回の現場でお会いしましょう！快適なCSSライフを！