:is()は内部のセレクタの中で最も高い詳細度になる
非直感的なので、罠と言えるmrsekut.icon
:is(A,B,C)のように書いたとき、
A, B, Cの中で最も大きいものと同じになる
:is()の簡易な説明としては、「以下2つが同じ意味になる」というもの code:before.css
.card .title, .card p {
color: red;
}
code:css
.card :is(.title, p) {
color: red;
}
しかし実際は同じにならないケースがあるmrsekut.icon
例えば
このHTMLに対し、
code:html
<div class="card">
<div class="title">title</div>
<p>body</p>
</div>
:is()を使わずに指定すると
code:css
/* 0-2-0 , 0-1-1 */
.card .title, .card p {
color: red;
}
/* 0-1-1 */
.card p {
color: blue;
}
青色になる
https://gyazo.com/9cc98bdaa59a9dc2298128efdc41e65f
:is()を使って指定すると
code:css
/* 0-2-0 !!!!! */
.card :is(.title, p) {
color: red;
}
/* 0-1-1 */
.card p {
color: blue;
}
両方赤色になる
https://gyazo.com/e5d9ae9dda4791b0947e86c6bb91da4e
これは、詳細度が強いものに合わせられているため
.card pは、0-1-1
.card .titleは、0-2-0
.card :is(.title, p)は、0-2-0になる！
pより.titleの方が強いため、そちらが優先される
.card :where(.title, p)と書き換えると、0-1-0になる
(.cardが0-1-0で、:where(..)が0-0-0なので)
だから、「(..)の中で最も低い詳細度になる」わけでもない
対称的なわけではない
以下のツイートの動画で主張されているのはこれの話
@stefanjudis: TIL that specificity of :is() in CSS is not what you might expect. 🙈 Video alt: Example showing that the specificity of an :is() selector is evaluated by the most specific included selector
https://video.twimg.com/ext_tw_video/1264628277685170178/pu/vid/640x360/Qhhxf2CpTc0wMzbq.mp4