第3回 新しいCSSの機能を試してみる
:is() / :where()
セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。
https://developer.mozilla.org/en-US/docs/Web/CSS/:is
https://developer.mozilla.org/en-US/docs/Web/CSS/:where
https://caniuse.com/?search=%3Ais
96.11%
code:index.html
<header>
<p>ほげほげ</p>
</header>
今までこう書いていたものが
code:style.css
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
こう書ける
code:style.css
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
crashrt.iconすごい
便利だ pollenjp.icon
:is() と :where() の違いとして、:where() に囲まれた部分は詳細度の計算に寄与しない。
code:style.css
:where(header, main, footer) p {
color: red;
cursor: pointer;
}
このCSSは、 p に対して書かれたスタイルと同じ詳細度を持つ
@layer
https://developer.mozilla.org/ja/docs/Web/CSS/@layer
74.52%
https://caniuse.com/?search=%40layer
code:index.html
<div class="box">
<p>Hello, world!</p>
</div>
code:style.css
@layer l1 {
p {
color: rebeccapurple;
}
}
@layer l2 {
.box p {
font-weight: bold;
font-size: 1.3em;
color: green;
}
}
crashrt.icon l2 の方が適用されるところを l1 が適用されるように優先順位を変えることができる?すごい
こう書くと
code:style.css
@layer l1 l2;
l2が適用されて文字は緑になる
こう書くと
code:style.css
@layer l2, l1;
l1が適用されて文字が紫になる
レイヤー以外のスタイルを最初に宣言しても、それはレイヤーのスタイルの後に適用されます。
とMDNにある通り、@layerに囲まれていないCSSは最後に適用されるため、
code:style.css
@layer l2;
p {
color: rebeccapurple;
}
@layer l2 {
.box p {
font-weight: bold;
font-size: 1.3em;
color: green;
}
}
こう書くと、文字は紫になる
code:style.css
@layer l1 {
p {
color: rebeccapurple;
}
}
@layer l3 {
.box p {
color: pink;
}
}
@layer l2 {
p {
color: green;
}
}
こう書くと、下にあるものが優先されるので、文字は緑。
レイヤーの適用優先順を変えたいなら、先頭で
code:style.css
@layer l1, l2, l3;
のようにする。
下の方に書いても効かなかった。