こんにちは！フロントエンドの現場で長年コードを書き続けていると、たまに「なんでこんなにCSSが効かないんだ……」と頭を抱えたくなる夜がありますよね。
特に、せっかく書いたスタイルが、別の場所で書いた「詳細度（Specificity）の高いセレクタ」に上書きされて消えてしまう現象。あれ、本当に心が折れますよね。
今日はそんなCSSの「詳細度」という厄介なルールを、まるで魔法のように無効化してしまうすごい道具、`:where()` 擬似クラスについてお話しします。難しく考えなくて大丈夫。一緒に紐解いていきましょう！
—
CSSの詳細度って、何に似ている？
CSSには「より具体的に指定した方が勝つ」というルールがあります。たとえば、「全人類」を指定するより「東京都の渋谷区に住む〇〇さん」を指定する方が、ピンポイントで情報を伝えられますよね。
CSSも同じで、`div`（タグ）よりも `.card`（クラス）が強く、さらに `#header`（ID）はめちゃくちゃ強い。この「強さ」のことを詳細度と呼びます。
でも、大規模なサイトを作っていると、この「強さの殴り合い」でCSSがどんどん汚れていってしまいます。そこで登場するのが `:where()` です。
—
`:where()` は「詳細度を0にする」魔法の箱
`:where()` は、中に書いたセレクタの「強さ」をすべてゼロにしてくれる、特別な入れ物のようなものです。
イメージしてみてください。あなたは新しく引っ越した部屋に、前の住人が置いていった「重たい家具（強いCSS）」があるとします。普通はそれを動かすのに一苦労ですよね。でも、`:where()` という魔法の箱に入れてしまえば、その家具たちは「ただの軽い置物」になってしまうんです。
実践！コードで見てみよう
まずは、`:where()` を使わない、よくある「詳細度で負けちゃう」例です。
/ 普通の書き方 /
.article-text p {
color: red; / ここが強い！ /
}
/ 後から書いたのに、負けてしまう /
p {
color: blue; / さっきの .article-text p に負けて赤のままになる /
}
これが `:where()` を使うと、こうなります。
/ :where()を使うと、詳細度が0になる！ /
:where(.article-text) p {
color: red;
}
/ これなら、後から書いたこっちが勝てる！ /
p {
color: blue; / 見事、青色に変わります /
}
どうでしょう？ `p` タグ単体で指定したときと、`:where(.article-text) p` で指定したとき、どちらも「強さが0」なので、後から書いた方が素直に適用されるんです。
—
なぜこの機能が現場で重宝されるのか？
私が現場で `:where()` を使う最大の理由は、「リセットCSSやライブラリとの喧嘩を防ぐため」です。
自分で書いたCSSが、外部から読み込んだライブラリのCSSに負けて、レイアウトが崩れた経験はありませんか？ライブラリ側が `:where()` を使ってスタイルを定義してくれていれば、私たちは自分のスタイルをあてるときに、わざわざ詳細度を上げるための無茶な書き方（クラスを重ねたり `!important` を使ったり）をする必要がなくなるんです。
「CSSをきれいに保ちたいなら、なるべく詳細度は上げない」というのが、プロの現場での鉄則です。`:where()` は、その鉄則を守るための非常に強力な味方なんですよ。
—
今日のまとめ：恐れず使ってみよう
- 詳細度とは「強さ」のこと。 強すぎると後から修正するのが大変になる。
- :where() は「強さをゼロにしてくれる」魔法の箱。
- リセットCSSや、汎用的なスタイルを作る時に使うと、後で修正しやすいコードになる。
最初は少し不思議な書き方に感じるかもしれませんが、慣れてしまえば「これなしで CSS 書くの、ちょっと怖いな」と思うくらい、頼りになる存在になるはずです。
もしコードを書いていて「どうしてもスタイルが上書きできない！」と困ったときは、一度 `:where()` のことを思い出してみてください。きっとあなたのCSSライフが、もっとシンプルで自由なものに変わるはずです。
応援しています。あなたの書くコードが、今日もきれいにブラウザで表示されますように！
コメント