最近便利なCSSおれおれAdvent Calendar 2023 – 13 日目

例えば td と th とか。似たような位置にある似たようなセレクターをまとめて書けるので楽ちんです。

例

.TheTable > :is(thead, tbody) > tr > :is(th, td) {
  border: 1px solid lightgray;
}

:is() の詳細度に注意

:is() はその引数で与えられるセレクター群の中で最も詳細度が高いものになります。

例えば :is(a, .b, #c) と書いた場合、詳細度はそれぞれ a が 0,0,1 、 .b は 0,1,0 、 #c は 1,0,0 で、:is() 全体の詳細度は 1,0,0 になります。

これはちょっと注意が必要です。合致する対象ごとじゃなくて書いた中身ですぐに決まります。

例えば <div class="foo"> という要素を考えます。.foo は div より詳細度が高いので、次の例だと文字は赤色のまま、color: green は適用されません。<div> に ID を与えれば緑色になるけど付いてませんね。

<div class="foo">Hello</div>

.foo {
  color: red;
}

div, #ok {
  color: green;
}

一方これに :is() を使うと、ID を含み詳細度が上がるので、該当要素に ID がなくても合致し緑色になります。

.foo {
  color: red;
}

:is(div, #ok) {
  color: green;
}

適当にまとめるんじゃなくて同じ詳細度のものを使うようにすると混乱しないかも。あと宣言の入れ子も有効に活用すると良いかと。

:where()

:where() は :is() と同じ機能で、詳細度が 0 です。常に 0 です。

:where(*) とか書くとマジで詳細度 0,0,0 になります。そんなのできるんだ。まあ詳細度が 0 なだけで影響がゼロというわけではないんだけど。

おしまい

:is() に適当に詳細度の高いセレクターを突っ込んで !important の代わりに使えそうな気がすね。やめてね。

ちなみに Google Chrome の DevTools だと、セレクターにマウスカーソル乗せると詳細度を表示してくれます。ありがとう。

参考