2022年から使ってゆくCSS 〜疑似クラス :is() 〜

こんにちは、森田です。
2022年初記事です。明けましておめでとうございます。
本年も Gaji-Labo よろしくお願いいたします。

さて、年も変わったことですし今年から新しいことを始めたいと思います。
今年はまず疑似クラス :is() を使っていきたいと思います。

疑似クラス :is() とは

/* 今まで */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}

/* 疑似クラス :is() を使うと */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}

:is() は、複数のセレクタを1つにまとめて指定できる疑似クラスです。
上記のように、今までカンマで子孫セレクタまで何度も書かなければいけなかったものを1つにスッキリした記述にすることができます。

色々な要素を使う WYSIWYG エリアのスタイリングなどで使えそうな気がします。

Sass を使っているとネストがあるので使わなくてもそこまで困らないですが、コンパイル後の CSS の記述量は減らせますし、慣れれば見やすくなるので使う価値はありそうです。

仕様

• MDN – :is() (:matches(), :any())
• Selectors Level 4 (Selectors 4) – 4.2. The Matches-Any Pseudo-class: :is()

以前は、 :matches() や :any で策定が進んでいましたが :is() という名前で策定されたようです。
参考：[selectors-4] Rename :matches() to :is()

対応ブラウザ

2022年1月現在の Can I use ではほぼ全ての最新版ブラウザで使うことができます。

IE11 がターゲットブラウザに入っている案件も随分減ってきておりますし、これからどんどん使っていくことができそうです。

疑似クラス :is() の詳細度について

:is() 自体に詳細度を上げる効果はありません。
同じ詳細度のセレクタを使っていれば、詳細度は変わりません。

/* 詳細度:0,2,0 */
.section > :is(.title, .text) {
  color: red;
}

/* 詳細度:0,2,0 */
.section > .title,
.section > .text {
  color: green;
}

上記であれば同じ詳細度のセレクタなので .title と .text の文字色は green になります。

知っておくべき :is() の詳細度の仕様

:is() 内のセレクタに詳細度が違うセレクタが混在すると、全ての詳細度が一番高いものになります。
結構ハマりそうなのでこの仕様はおぼえておくと良さそうです。

/* idセレクタがあるので詳細度:1,1,0になる */
.section > :is(.title, .text, #title) {
  color: red;
}

/* 詳細度:0,2,0 */
.section > .title,
.section > .text {
  color: green;
}

上記のようにis() 内に id セレクタがあるので全てのセレクタが「詳細度:1,1,0」になります。
なので .title と .text の文字色はis() を使った方が詳細度が高くなり red になります。

場合によっては詳細度を上げるハックに使えるかもしれませんね。

まとめ

今年から積極的に使っていこうと思います。