:where()

from 擬似クラス

パッと見の挙動としては:is()と全く同じ

ただし、詳細度の扱いが特殊になっている

ID-CLASS-TYPEで表記すると0-0-0になる

(:is()と比較してではなく)CSS全体で見てもかなり特殊な扱いになっている

mdn

パッと見の挙動としては:is()と全く同じ

複数の要素に対し、同じ指定をしたい場合に簡潔に書けて便利だね、というやつmrsekut.icon

以下2つは同じ意味

code:before.css

header p:hover,

main p:hover,

footer p:hover {

color: red;

cursor: pointer;

}

code:after.css

:where(header, main, footer) p:hover {

color: red;

cursor: pointer;

}

詳細度の扱いが0-0-0になる

最も優先順位が低い指定になるということ

例えば以下のように書くと

code:css

/* 0-0-1 */

:where(#defaultTheme) a {

color: red;

}

:where(#defaultTheme)が、0-0-0

aが、0-0-1

なので、全体で0-0-1になる

例えば以下のように書くと

codepen

code:html

<h2>is style</h2>

</section>

<h2>where style</h2>

</section>

code:css

/* 0-1-1 */

:is(.is-style) :is(h1, h2, h3, h4, h5, h6) {

color: red;

}

/* 0-0-1 */

:where(.where-style) :is(h1, h2, h3, h4, h5, h6) {

color: blue;

}

/* 0-0-2 */

section h2 {

color: green; /* isに負けるが、whereには勝つ */

}

こうなる

https://gyazo.com/e8ef061302fdae65f1489b32571436e8

簡潔に書きたいわけではなく、ただ単純に優先順位をさげるために

code:css

:where(.hoge) {..}

みたいに、(..)の中を1つだけ指定して書くことってあるんだろうか

hack感漂う

やってる記事があった ref

Componentの内部で指定したstyleをwhereで書いておき、利用者はそれを上書き指定して使える

発想はなるほどだけど、例が微妙な気もする

ただ、良い例を採用すればこの方法はそもそも不要となりそうな気もする

普通にpropsを使ったほうが自然になりそうな気も