イケイケな制作会社さんのデザインカンプをコーディングしました。
それはもうイケイケで。

指示書にはこのような指示がありまして

• ・詳細度が上がらないように気をつけてください。
  （レイアウト要素・モジュール要素は除く）
• ・詳細度を上げる必要がある場合は、:whereを使ってください。

うそ。え。みんなはこれでわかっちゃうの？
５分ほどフリーズします。
何度も何度も読み返します。「詳細度」を上げる・・？
指示書に近づいたり、少し遠くから見つめてみたり。すると「詳細度」がだんだん毛虫のような、もじゃもじゃに見えてきた。とうとう認識できなくなりました。見つめすぎてゲシュタルト崩壊です。待って。詳細度を上げるのは誰なの？もはや他人事にすら思えてきました。

CSSの詳細度

新しい疑似クラス「:is()」「:where()」が、SafariとFirefoxのプレビュー版でサポートされるようになりましたとさ。

CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！

👆を読みました。
セレクタの繰り返しを減らす。whereの詳細度は常に0。
なるほどわからん。

「Youにはこれがわかるかい？」と、日本語より英語が得意なプログラマさんを巻き込んで一緒に調べてもらいました。英語で。
「こちらのほうがわかりやすいね」と教えてくれたリンクです。日本語です。

https://developer.mozilla.org/ja/docs/Web/CSS/:where

たしかにわかりやすい。コード見た方が◎
で、isもwhereも同じ結果になりそうなのだけど、なんでisじゃなくwhereなの？
というわけで、もやっとするときは実際に書いてみないとね。

普通の記述、擬似クラス使わない

CODEPENが使いたいだけです。
divが3つ。中にあるh2の背景を３番目だけピンクにしてみます。

See the Pen Untitled by kaori yamazaki (@kaori-yamazaki) on CodePen.

※敢えて「このclassの」「さらにこのclassの」ってしつこい書き方しているよ。

:where() で指定してみる

:is() も :where() も複数のセレクタをまとめて書ける。記述が減ります。

See the Pen :where() by kaori yamazaki (@kaori-yamazaki) on CodePen.

:is() で同じように書いてみると

ピンクにする前、黒い背景の記述は :is() も :where() も同じ結果です。
３番目のタイトルの背景をピンクにしたいというのを実行したときに挙動の違いが。

See the Pen Untitled by kaori yamazaki (@kaori-yamazaki) on CodePen.

というわけだ。ピンクにならない。

ポイントだよ

通常CSSは上から順に実行されるので、下に書いたものが強いです。先に書かれた内容は上書きされるはず・・なのですが、isやwhere、その詳細度に応じて優先順位が変わる。

「詳細度」って日本語がわかりにくかったんだ。
指示書の「詳細度を上げる」を「つよつよCSS」に変換してみようと思います。

• ・詳細度が上がらないようにつよつよCSSにならないように気をつけてください。
  （レイアウト要素・モジュール要素は除く）
• ・詳細度を上げるつよつよCSSにする必要がある場合は、:whereを使ってください。

こんな指示のしかただったら、多分みんな萎えるよね。

おまけ。:has()

divの中にpがあるものだけピンクにしてみます。

See the Pen :has() by kaori yamazaki (@kaori-yamazaki) on CodePen.

便利だと思います。
ややこしくなってしまう側面もあるのかな。上手に使えば便利ですね。

コンポーネント化して既存のcssを使いまわし、余計な記述を減らそう。
IDや!impontant など使わないで詳細度を意識しましょう。というコンセプトでしょうか。
前提として、しっかり考えられたデザインがあってこそ。

お勉強になりました◎