第3回 新しいCSSの機能を試してみる

:is() / :where()

セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。

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;

}

:is() と :where() の違いとして、:where() に囲まれた部分は詳細度の計算に寄与しない。

code:style.css

:where(header, main, footer) p {

color: red;

cursor: pointer;

}

@layer

74.52%

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;

}

}

こう書くと

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;

のようにする。

下の方に書いても効かなかった。