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 の記述量は減らせますし、慣れれば見やすくなるので使う価値はありそうです。

仕様

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

対応ブラウザ

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

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 になります。

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

まとめ

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

Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングとMacの開発環境を快適にすることにいつも燃えています。