CSS擬似クラス関数 :is()が便利で使いやすい！

フロントエンド CSS

トラストバンク開発部・フロントエンドチームの君田（きみた）です。

本日はCSS擬似クラス関数である:is()について気になったので記載していきます！

CSSの擬似クラス関数:is()とは？

CSSの擬似クラス関数:is()とは、引数にCSSのセレクタを渡すと、その条件に一致した要素を選択することができる便利なCSS擬似クラス関数です。 今まで1つ1つ記述していたCSSをまとめて記載できるようになるので、かなりスッキリ記載することができてハッピーになれそうですね。 基本的に現在使用されている主流なブラウザでは対応しているので、問題なく使用できそうです。

developer.mozilla.org

ただし、古いバージョンのブラウザの場合は対応していないものがあるので、互換性を保つためにも以下のように指定しておくと間違いないです。（ほんとは書きたくないけど仕方ない)

  • :-webkit-any() ⇨ 古いバージョンのChrome/Safariなどに対応するため
  • :-moz-any() ⇨ 古いバージョンのFirefoxに対応するため
  • :matches() ⇨ :is()の前の名前、以前は:matches()という名前で使用されていたため

余談ですが、:is()の名前を変更するときのやりとりが見れて面白いです github.com

:is()の使用例

分かりやすい使用例を記載してみます。

  • 未使用の場合
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
  • 使用した場合
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

どちらも同じ結果になりますが、かなりスッキリと記述できるようになりました。

同じような機能を持つ擬似クラス:where()とは？違いは？

基本的には行っていることは同じです。なので以下のコードは全く同じ動きをします

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

違いは詳細度に影響を与えるかどうかです。 詳細度とは、CSSで指定されたスタイルの重みづけをする値です。詳細度が高ければ高いほどスタイルが優先されて適用されるようになります。 一番高い詳細度を指定できるのはIDで指定することです。 なので、例えば以下のように記述した場合は、IDで指定したスタイルが優先されて適用されます。

<div id="app">何かしらを表示させる要素</div>

#app {
  background-color: green;
}

div {
  background-color: red;
}

:where()で指定した要素は詳細度が常に0になり、:is()で指定した場合は詳細度の計算が適用されます。 また、:where()で指定した要素はどのような要素であれ、詳細度を上げることができません。 例えば1つの要素を:where()と:is()で同じ要素を指定した場合は:is() で指定したスタイルが適用されます。

<header>
  <p>詳細度は:is()で指定しなければ適用されない</p>
</header>

:where(header) p {
  color: blue;
}

:is(header) p {
  color: red;
}

上記の記述をした場合、テキストの色はredになります。

どちらを使用するのか良いのか？

基本的には:is()を使用した方が良いと思いました。 ある要素の中に存在する要素を:where()で指定しスタイルを記述していたとしても、その他の方法で指定されていた場合はそちらが優先されてしまうためです。 では:where()はいつ使うのでしょうか？

CSS を編集するアクセス権を持たない開発者が使用するサードパーティ CSS を保有する場合、可能な限り詳細度の低い CSS を作成することは良い習慣と考えられています。 developer.mozilla.org

テーマなどを作成し、第三者へ提供する場合は使用するユーザー側で簡単にスタイルを上書きできるため、スタイルは:where()で指定するといいかもねという感じです。

最後に

弊社トラストバンクでは様々な職種で絶賛採用中です！ 気になった方、是非お気軽にご連絡ください！

www.wantedly.com