cssの階層を見やすくまとめる:is()疑似クラスを紹介するよ

こんばんわ。たいそん(@ttaison)です。

今日はcss疑似クラスのお話。
代表的な疑似要素に:beforeや:afterなんてものがありますが、今回は:is()という
疑似クラスについて書いてみたいと思います。

:is()疑似クラスとは？

そもそも:is()は以前にあった:any :matchesが改名されたクラスになっており、用途は基本的に一緒。

どんな機能をもっているかについては、MDNの説明文にこんな感じで書いてあります。

CSS の :is() 疑似クラス関数は、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。
数多くのセレクターを小さくまとめて書くのに便利です。

出典： is() (:matches(), :any()) – CSS: カスケーディングスタイルシート | MDN

文字で見ると、ごちゃごちゃしますね　笑
ちょっとコードを書いてみましょう。

:is(.foo, .bar, .hoge) .section{
	color: red;
}

/** 上記が出力されると下記になる ****/
.foo .section,
.bar  .section,
.hoge .section{
	color: red;
}

どういうことかというと、.foo, .bar, .hogeの中にある.sectionに対してスタイルをあてる状態になる、要は下層に共通した要素(.section)がある複数の要素(.foo,.bar,.hoge)を簡単にネスト（階層化）してくれる疑似クラスなんです。

ネストする目的でscssなんかを使っていた場合、これ使えばcssのみで対応できちゃうんで、
かなり楽ではないでしょうか。

実際、MDNの例など見てみると、スタイルが階層化しているところをかなり簡略化できています。

/* 3層（以上）の順序なしリストに四角形を使用 */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

これが、

/* 3層（以上）の順序なしリストに四角形を使用 */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

cssコードの見やすさが全然違いますよね。

また、見やすさ以外にもいいトコロがあって、
仮にセレクターのリスト内（カッコの中の要素）にブラウザ対応がないセレクターが混ざったとしていても、そのほかの要素はちゃんと適用してくれます。

※通常いずれかの要素がブラウザ対応していない場合は、すべて無視される。

/** :unsupportedが対応していない場合、:validも無視される **/
:valid, :unsupported {
  ...
}
/** :is()の中であれば、:validは適用される **/
:is(:valid, :unsupported){
	...
}

予期せぬ表示崩れを防ぐためにも使えそうですね。

:is()疑似クラスでNGな書き方

あと、書き方にはアンチパターンもあるので、注意しましょう。

/** アンチパターン 最後尾の要素も:isでくくられている**/
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

:is()疑似クラス対応ブラウザの状況

can i use でのブラウザ対応状況

対応ブラウザはこのとおり。ですが、
なぜか自分のchromeブラウザ（バージョン78）ではスタイルが適応できず。

記法が間違っているのかと思い:-webkit-anyに差し替えてみたらふつうに動いたので、調べてみたらどうやらまだ:is()はブラウザサポートされていないとのこと。

今後の対応に期待。ですね。

まとめ

さて、cssもどんどん進化がすすんで、今までcss単体では成しえなかったコトも適用できるようになってきていますね。

疑似クラスはほかにも便利な機能がたくさんありますので、
気になる方はいろいろと調べてみてください。

私もまた、記事にしてみたいと思います。
それではまた！