こんにちは！CSSの海へようこそ。チーフアーキテクトの私です。
Web制作やフロントエンドの学習を始めると、CSSのセレクタ（「どの要素にスタイルを適用するか」を指定する魔法の呪文のようなもの）の多さに、思わずため息をつきたくなりますよね。「あっちを直せばこっちが崩れ、詳細度（特異性）の計算に頭を悩ませる……もうイヤだ！」なんて、画面の前で頭を抱えていませんか？
大丈夫ですよ、安心してください。みんな最初はそこでつまずきます。
今回は、そんなCSSの面倒くさい悩みを一発で解決してくれる、現代CSSの超便利ツール`:is()`と`:where()`を取り上げます。しかも、これらをネスト（入れ子）させたときに何が起きるのか、ブラウザの裏側の動きやパフォーマンスの話も含めて、できるだけ分かりやすく、優しく紐解いていきましょう！
—
そもそも `:is()` と `:where()` ってなに？
難しく考える必要はありません。これらは一言でいうと、「長いCSSセレクタをスッキリまとめるおまとめパック」です。
例えば、ブログの記事ページの中で、見出し（`h2`, `h3`, `h4`）の色を全部まとめて変えたいとき、普通に書くとこうなりますよね。
article h2,
article h3,
article h4 {
color: #333;
}
「うわ、`article`って何度も書くの面倒くさいな……」と思いました？そう、面倒なんです。これを `:is()` を使って書くとこうなります。
article :is(h2, h3, h4) {
color: #333;
}
おお、すっきり！「`article`の中にある、`h2`か`h3`か`h4`のどれか」という意味になります。まるで、スーパーのお惣菜コーナーで「どれでもお好きなものを3つ選んで500円！」とまとめて買うような感覚ですね。
—
主役の登場：これを「ネスト（入れ子）」させるとどうなる？
さて、ここからが本題です。この便利な `:is()` や `:where()` を、さらに別の `:is()` の中にネスト（入れ子）させたら、ブラウザの頭の中はどうなってしまうのでしょうか？
たとえば、こんなコードを書いたとします。
:is(header, footer) :is(:is(h1, h2), .logo) {
font-weight: bold;
}
「うわぁ、マトリックスみたいで頭が痛くなりそう……」なんて思いましたか？ 大丈夫です、分解して見ていきましょう。
これは要するに、
1. 「ヘッダーまたはフッターの中で」
2. 「さらにその中で、大見出し・中見出し、もしくは`.logo`クラスがついているもの」
を探し出して、太字にするという指定です。
ブラウザの評価順序：実は「外側から内側」へスキャンしている
私たちがコードを読むときは「内側（カッコの中）から外側」へ解釈しがちですが、ブラウザのエンジンは、実は右から左へ、そして外側の大きな枠組みから順に効率よく要素を探していきます。
身近な例えで言うと、これは「大きなショッピングモール（外側の `:is`）」に入って、その中にある「特定のフロア（内側の `:is`）」に行き、さらにその中にある「お目当てのお店」を探すようなものです。
ブラウザは優秀なので、どれだけ複雑にネストさせても、一瞬で「あ、この要素ね」と見つけてくれます。ただ、ここで大きな落とし穴（パフォーマンスへの影響）が隠されているんです。
—
パフォーマンスと「詳細度（スコア）」の知見
ここで、現場のシビアなプロとしてのちょっとした裏話をさせてください。
実は、`:is()` と `:where()` には、決定的な違いがひとつだけあります。それが「詳細度（CSSがどれくらい強いかというスコア）」の計算方法です。
- `:is()` の詳細度：括弧の中にある一番強いセレクタの詳細度をそのまま引き継ぎます。
- `:where()` の詳細度：なんと、ゼロ（0）です！どれだけ長く書いても、強さは常に「ゼロ」のまま。
ネストさせまくるとどうなる？
もし `:is()` を何重にもネストさせると、ブラウザは「一番強い奴はどれだ…？」と詳細度の計算にわずかにコストを払うことになります。人間で言えば、役職者が何人も連なっている組織で「最終的な決裁権は誰にあるんだっけ？」と確認し合うようなものです。
これが数個の要素なら全く問題ありませんが、数千・数万個のDOM要素がある巨大なWebアプリケーションで `:is()` の深いネストを乱用すると、ブラウザがスタイルを計算する時間（スタイル計算フェーズ）がわずかに膨らみ、スクロールのカクつきや、ページの表示遅延（パフォーマンス低下）の原因になることがあります。
私たちが実務で選ぶべきベストプラクティス
現場のチーフアーキテクトとして、皆さんにお伝えしたい黄金律はこれです。
1. 基本は `:where()` を使おう！
詳細度を持たない `:where()` は、後から別のコードでスタイルを上書きしやすいため、非常にメンテしやすいCSSが作れます。「詳細度で絶対に負けたくない！」という特別な理由がない限り、まずは `:where()` を検討するのが現代のプロの作法です。
2. ネストは「最大でも2階層まで」に留める
`:is(:is(…))` のような深いネストは、コードを書いている本人すら数ヶ月後には読めなくなります。「お買い物の階層」と同じで、迷子にならない深さ（せいぜい1〜2階層）で留めておくのが、CSSを美しく保つ秘訣です。
—
実用的なサンプルコード
それでは最後に、今日からすぐに使える、すっきり読みやすいコード例を見てみましょう。
/ ————————————————–
ヘッダーとフッター共通のナビゲーションリンク
:where() を使うことで、後から色を上書きしやすくしています
————————————————– /
:where(header, footer) :where(nav a, .site-link) {
color: #0066cc;
text-decoration: none;
transition: color 0.2s ease;
}
/ マウスホバー時のスタイル（詳細度が低いので、ここで簡単に上書きできます） /
:where(header, footer) :where(nav a, .site-link):hover {
color: #ff3366;
text-decoration: underline;
}
このコードでは、ネストを深くしすぎず、かつ記述を極限までシンプルにまとめています。エディタに貼り付けて、ぜひご自身の目でそのすっきり感と動きを確かめてみてくださいね。
—
最後に：焦らず、一歩ずつ進んでいきましょう
CSSのセレクタやパフォーマンスの話は、最初は呪文のようで難しく感じるかもしれません。「全部完璧に理解しなきゃ！」と意気込がなくても大丈夫です。
まずは「こんな便利なまとめ方があるんだな」「ネストしすぎるとブラウザが少し大変になるんだな」という引き出しを頭の中にひとつ持っておくだけで、あなたの書くコードは確実に洗練されていきます。
もしまた分からないことが出てきたら、いつでもこのブログに帰ってきてくださいね。あなたのWeb制作の旅を、私はいつも応援しています！
コメント