こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、チーフアーキテクトの私です。
日々のコーディング、本当にお疲れ様です！
「CSSって、いざ書こうとすると、なぜか自分の書いたスタイルが効かない……」
「詳細度（点数）の計算に頭を悩ませて、結局 `!important` で強引に上書きして自己嫌悪……」
そんな泥臭い経験、あなたにもありませんか？大丈夫です、誰もが最初はそこで盛大につまづきます。私も昔は、詳細度のモンスターに何度も夜道を追いかけられましたから。
さて、今回はそんなCSSの「詳細度の呪い」を綺麗に解き放ってくれる、現代CSSの超重要スーパースター`:where()`（ウェア）関数型疑似クラスについて、どこよりも優しく、そして実務のリアルな目線でお話ししていきますね。
肩の力を抜いて、カフェオレでも飲みながらリラックスして読んでいってください。
—
1. なぜCSSの上書きはこんなにも難しいのか？（お買い物のルールに例えてみよう）
`:where()` の凄さを語る前に、まずは敵（詳細度）を知る必要があります。
CSSの詳細度って、よく「点数バトル」に例えられますよね。
- クラス名（`.button`）は10点
- ID名（`#main`）は100点
みたいな感じで、点数が高い方が勝つというルールです。
これを身近なものに例えるなら、「お買い物の決定権」みたいなものです。
家族会議で、子供（1点）が「このお菓子が欲しい！」と言っても、お母さん（10点）が「こっちの野菜にしなさい！」と言えば、お母さんの意見が勝ちますよね。さらに、お父さん（100点）が「今日は外食だ！」と言えば、一発で家庭の決定権が覆ります。
CSSもこれと同じ。後から書いたスタイルであっても、詳細度（点数）が高いやつに勝たれてしまうんです。
つまづきポイント：共通パーツを少しだけ変えたいとき
例えば、サイト全体の「ボタン」という共通パーツを作ったとします。
/ サイト全体のボタン（クラス名なので詳細度は「10」） /
.btn {
background-color: blue;
color: white;
}
ここに、「アラート用の赤いボタン」という例外を作ろうとして、こう書いたとします。
/ アラート用のボタンにしたくて、ちょっと詳細度を盛ってみた /
div.alert .btn {
background-color: red; / 勝ってほしい！ /
}
この書き方、実は実務の現場では「のちのち自分の首を絞める爆弾」になりやすいんです。なぜなら、`div.alert .btn` は詳細度が「20」になってしまい、あとから「やっぱりこのボタン、特定のページだけ緑にしたいな」と思ったときに、またさらに強い詳細度で上書きしなきゃいけないという「詳細度インフレ」の悪夢が始まるからです。
ここで登場するのが、今回の主役 `:where()` なんです！
—
2. `:where()` ってなんだろう？（魔法の「0点」バリア）
`:where()` は、一言で言うと「複数のセレクタをまとめて指定できるけれど、詳細度は常に『0点』にしておくよ」という魔法の関数です。
イメージとしては、RPGの防具みたいなものです。
どんなに強力な武器（たくさんのセレクタ）を装備していても、`:where()` という防具をつけると、受けるダメージ（詳細度）が常に「0」にリセットされる。そんなイメージです。
百聞は一見にしかず。コードを見てみましょう。
/ divの中にあるpタグ、articleの中にあるpタグ、の文字色をまとめて灰色にしたい /
:where(div, article) p {
color: #666;
}
この書き方の何がすごいか分かりますか？
`div` や `article` というHTMLタグをたくさん指定しているにもかかわらず、このセレクタ全体の詳細度が「0」になるんです。
つまり、あとから「やっぱり特定の場所だけ文字色を黒にしたい！」と思ったときに、こんな風に超シンプルなセレクタで簡単に上書きできるんです。
/ 詳細度が0なので、あとからの上書きがめちゃくちゃラク！ /
p {
color: #333;
}
もし `:where()` を使わずに `div p, article p` と書いていたら、詳細度は普通の「1」になります。小さな差に見えますが、大規模なWebサイトになってくると、この「詳細度が上がらない」というメリットが、あなたのコーディングライフを天国のように快適にしてくれます。
—
3. 実務でどう使うの？実践的なコード例
では、もう少し具体的なシチュエーションで `:where()` の使い方を見てみましょう。
今回は、Web制作で本当によくある「ボタンのバリエーション」を例にします。
以下のコードを、そのままあなたのエディタのCSSファイルに貼り付けて試してみてくださいね。
/ ==========================================
1. ベースとなるボタンのスタイル
========================================== /
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
border: none;
cursor: pointer;
background-color: #e0e0e0; / デフォルトは灰色 /
color: #333;
}
/ ==========================================
2. :where()を使った状態別のスタイル（詳細度：0）
========================================== /
/ マウスホバー時やフォーカス時に、ふんわり色を変えたい /
.btn:where(:hover, :focus) {
opacity: 0.8;
outline: 2px solid #0056b3;
}
/ ==========================================
3. 後から「特定の部分だけ」上書きしたくなったとき
========================================== /
/ 「このページの特定エリアにあるボタンは、ホバーしても不透明度を変えたくない！」
そんなとき、:where()のおかげで簡単に上書きできます。 /
.special-section .btn:hover {
opacity: 1; / 通常通り、透けさせない！ /
}
チーフアーキテクトからのワンポイントアドバイス
もし上記の `:where(:hover, :focus)` の部分を、普通の疑似クラスで `.btn:hover, .btn:focus` と書いた場合、詳細度はクラスの「10」になります。
しかし `:where()` で囲うと、疑似クラス側の詳細度が「0」になるため、全体の詳細度は `.btn` の「10」のままキープされます。
これが何を意味するかというと、「あとから特定の場所だけでスタイルを例外的に変えたいときに、詳細度の計算で頭を悩ませる必要がなくなる」ということです。実務では、この「後からの上書きのしやすさ（保守性の高さ）」が神のようにありがたく感じられる瞬間が必ず来ます。
—
4. つまづきやすいポイントと「大丈夫ですよ」のフォロー
ここで、初学者の人が一歩踏み込んだときによく陥る疑問を先回りして解決しておきますね。
Q. 「えっじゃあ、CSSの詳細度は全部 `:where()` で0にしちゃえば最強じゃないですか？」
A. その着眼点、めちゃくちゃ素晴らしいです！
ですが、ちょっと待ってください。すべてのスタイルを `:where()` で囲ってしまうと、今度は「どのスタイルが優先されるべきか」のコントロールが効かなくなってしまい、CSSがカオスになってしまいます。
CSSの基本は、「デフォルトの共通スタイルは `:where()` で優しく（詳細度を低く）包み、個別の特別なスタイルや上書きしたい箇所で普通のセレクタを使う」という使い分けです。
すべてを力づくで解決しようとするのではなく、適材適所で頼るのがプロの技ですよ。
Q. 古いブラウザでも動きますか？
A. 大丈夫です、安心して使ってください。
`:where()` は、現在ほとんどすべてのモダンブラウザ（Safari, Chrome, Firefox, Edgeなど）で完全に対応しています。「古いInternet Explorer（IE）もサポートしなきゃいけないんです……」という地獄のような現場でなければ、今日から即戦力として導入して問題ありません。
—
5. まとめ：CSSをもっと自由に、もっと楽しく
今回は、詳細度を常に「0」にしてくれる優しい疑似クラス `:where()` について解説しました。
- `:where()` を使うと、セレクタ全体の詳細度を「0」にできる。
- 詳細度が上がらないから、あとからのスタイルの上書き（保守）が圧倒的にラクになる。
- 「詳細度インフレ」というCSSの面倒な悩みから解放してくれる心強い味方。
Web制作の勉強をしていると、覚えることがたくさんあって、「なんでここが反映されないの！？」とイライラすることも多いと思います。でも、そういう壁にぶつかるたびに、こうした便利な道具（モダンCSS）を知ることで、コーディングがどんどんパズルのように楽しくなっていくはずです。
もし今日書いたコードで分からないところがあったら、深呼吸して、もう一度ご自身のブラウザで試してみてくださいね。
あなたのフロントエンドライフが、少しでも軽やかで楽しいものになりますように。チーフアーキテクトの私から、心いっぱいのエールを送ります！
コメント