【CSS】:is()を使ってCSSを見やすく

複数の要素にCSSをあてる場合、カンマ区切り（上記スクショ左側）で指定ができます。
2つや3つ程度ならカンマ区切りでも問題ないのですが、これが5つ6つと増えていくと、CSSが見にくくなり少しの修正も手間に感じる…という経験はないですか？

今回は、:is()を使った複数指定の方法を紹介します。

:is()とは

スタイルをあてたいセレクタ（h1やp、div）などをisのかっこの中に書くと、そのセレクタにスタイルがあたる、というものです。

:is() は CSS の擬似クラス関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。
:is() - CSS: カスケーディングスタイルシート | MDN

使える場面

サイトのSEO改善のためにパンくずリストの中にh1やh2を設置し、赤文字で目立たせるよう指示がありました。

しかし、ページによってはパンくずリストのliの中をh2にしたいもの・したくないもの、pにしたいもの…など、細かく分かれているためカンマを使って複数指定しスタイルをあてたくなりました。

.breadcrumb li:last-child h2,
.breadcrumb li:last-child p {
    font-weight: bold;
    color: red;
}

2行くらいであれば見づらくもないしこれで修正を完了したいですが、ここで:is()を使うと1行でまとめられます。codepenをご覧ください。

今は.breadcrumb li:last-childと短いため、2行3行と:is()を使わずに書いても問題はないのですが…これが以下のコードだったらどうしましょう。

.breadcrumb > .text > .breadcrumb__item h2,
.breadcrumb > .text > .breadcrumb__item p,
.breadcrumb > .text > .breadcrumb__item .page__link,
.breadcrumb > .text > .breadcrumb__item .tetx__item{
  ...
}

かなり極端な例ですが、自分以外の誰かがCSSを編集するときにとても見づらいです。

よく読めば理解できますが、目を皿のようにして間違い探しをするのは大変だし時間がもったいないです。この書き方が10個も出てきたら、読むのが嫌になってしまうでしょう。

ならば、読みやすく修正もしやすい:is()でまとめて書けば未来の自分も修正する自分以外の誰かもやりやすいのではないでしょうか。

---

いつもカンマ区切りで何行も指定して書いていたのですが、久しぶりに見た自分のコードが読みづらくて驚き何かいい方法はないかと調べて:is()に辿り着きました。
主要なブラウザではサポートされているので、これから積極的に使っていきます！
"is" | Can I use... Support tables for HTML5, CSS3, etc