:is疑似クラスとは？
CSSの:is疑似クラスは、複数のセレクタをまとめて指定し、条件にマッチした要素にスタイルを効率的に適用できる便利な疑似クラスです。このクラスを使うことで、同じスタイルを複数の異なる要素に一度に適用することが可能です。:is疑似クラスを活用することでコードを簡潔に記述でき、読みやすさや保守性が向上します。
基本的な使い方
CSSの:is疑似クラスは、括弧内に複数のセレクタをコンマで区切って記述し、条件にマッチした要素にスタイルを一括適用することができます。また、この疑似クラスを使えば、冗長なコードを避けることができます。以下が使用例です。
:is(h1, .class, #id) {
color: blue;
font-weight: bold;
}:where疑似クラスとの違い
似ている疑似クラスとして:whereがあるのですが:isと:whereでは優先度（詳細度）が異なる点が大きな特徴です。:isは指定されたセレクタの通常の詳細度をそのまま適用しますが、:whereは詳細度を持たないため、常に優先度が最低になります。この特性により、:whereは上書きされやすいスタイルを設定したい場合に非常に有効です。スタイルの競合を避けたり、意図的に後から上書き可能なスタイルを指定する際に活用できます。
実装例
下記はフォームで使用する例です。
input,textareaのfocus,hover時を:is疑似クラスを使用してCSSの記述を一つにまとめています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:is疑似クラス実装例</title>
<style>
body {
display: grid;
place-content: center;
height: 100vh
}
form {
width: 100%;
}
/* フォーム要素がホバーまたはフォーカス状態の時のスタイル */
:is(input, textarea):is(:hover, :focus) {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* フォーム要素の基本スタイル */
input, textarea {
width: 100%;
margin: 10px 0;
padding: 8px 0 8px 8px;
border: 1px solid #ccc;
border-radius: 4px;
transition: all 0.3s ease;
}
.form-container {
display: flex;
align-items: center;
flex-direction: column;
width: 500px;
margin: 20px auto;
padding: 20px 20px 20px 10px;
background-color: #f8f9fa;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>:is疑似クラスのデモ</h2>
<form>
<div>
<input type="text" placeholder="名前">
</div>
<div>
<input type="email" placeholder="メールアドレス">
</div>
<div>
<textarea placeholder="コメント"></textarea>
</div>
</form>
</div>
</body>
</html>メリットと注意点
メリット
コードの簡潔化
:is疑似クラスを使うことで、複数のセレクタをまとめて記述でき、コード量を大幅に削減できます。これにより、同じスタイルを複数の要素に適用するのが非常に効率的になります。
可読性の向上
記述が簡潔になることで、コードがすっきりし、誰が読んでも理解しやすい構造になります。これにより、保守性も高まります。
注意点
ブラウザ対応
:is疑似クラスはモダンブラウザでサポートされていますが、古いブラウザでは対応していない場合があります。特定のユーザー層が古いブラウザを使用している可能性がある場合は、Can I Useなどのツールで対応状況を確認したうえで使用することをおすすめします。
優先度の理解:is疑似クラスは指定されたセレクタの通常の詳細度のため、優先度の計算や影響範囲を正確に理解し、意図しないスタイルの上書きを防ぐよう注意しましょう。必要に応じて、:where疑似クラスとの使い分けも検討してください。
まとめ
:is疑似クラスは、CSSコードを効率化し、可読性を向上させることができる疑似クラスです。また、:where疑似クラスと組み合わせることで、優先度を制御しながら柔軟なスタイル管理が可能となりますのでうまく使い分けて使用してみてください。
参考文献
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
:is() – CSS: カスケーディングスタイルシート | MDN
:where() – CSS: カスケーディングスタイルシート | MDN
