CSS設計をスムーズに進めるために、新しいセレクタの理解は必須です。
今回の記事では、近年導入されたCSSの :is() 擬似クラスセレクタについて、基本から応用、注意点、さらに関連するプロパティ :where(), :has() まで、わかりやすくまとめました！
後半では実践的なサンプルコードも紹介しますので、ぜひ復習＆実務に役立ててください。
目次
- CSSの
:is()擬似クラスセレクタとは？ - :is()を使うメリット
- :is()の基本的な使い方（サンプルコードあり）
- :is()使用時の注意点
- :is()と関連するCSSプロパティ
- :where()
- :has()
- 【応用】:is()を使ったレイアウト設計例
- 疑問点
- 【まとめ】CSS設計の質を高めるなら:is()を使いこなそう
CSSの:is()擬似クラスセレクタとは？
CSSの:is()擬似クラスセレクタは、複数のセレクタをまとめて1つに扱える新しい機能です。
これまで、同じスタイルを適用したい要素を1つずつ列挙していた手間が、グッと簡略化されます。
例）従来の書き方
h1, h2, h3 {
margin-bottom: 20px;
}:is()を使うと
:is (h1, h2, h3) {
margin-bottom: 20px;
}これだけ！
シンプルで管理もしやすくなりますね。
:is()を使うメリット
- コードがスッキリする
- メンテナンス性が向上
- ネストしたセレクタの記述が楽になる
- セレクタの組み合わせを柔軟に作れる
特に、パーツ単位で設計するコンポーネント型のCSS設計（BEMやFLOCSS）と相性が良いです！
:is()の基本的な使い方（サンプルコードあり）
基本構文
:is (セレクタ1, セレクタ2, セレクタ3) {
プロパティ: 値;
}使用例①：ボタンとリンクに同じスタイル
:is (a.button, button) {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
}使用例②：フォームパーツの共通スタイル
form:is (input[type="text"], input [type="email"], textarea) {
border: 1px solid #ccc;
padding: 8px;
width: 100%;
}:is()使用時の注意点
優先度（Specificity）が変わる
:is()に含まれるセレクタの中で、最も優先度が高いものに引っ張られます。
例：
:is (h1, .highlighted) {
color: red;
}この場合、.highlighted（クラスセレクタ）の優先度が影響します。
対策
- セレクタ設計をしっかり意識する
- 意図しない上書きを防ぐためにテストをしっかり行う
- 必要に応じて
:where()の使用を検討する
:is()と関連するCSSプロパティ
:where()
:where()は、:is()に非常によく似た擬似クラスセレクタです。
大きな違いは「優先度が常に0になる」こと。
:where (h1, h2, h3) {
color: #666;
}この書き方だと、スタイルの上書きが容易になります。
リセットCSSや、ベースデザインを設定する場面で特に有効です。
:has()
2022年頃から本格的に実装された、次世代CSSセレクタ。
親要素が特定の子要素を持つかどうかでスタイルを変更できます。
section:has (img) {
border: 2px solid blue;
}この例では、画像（img）が存在するsectionだけに枠線がつきます。
現状ではまだ完全対応していないブラウザもありますが、超強力なセレクタとして注目されています！
【応用】:is()を使ったレイアウト設計例
複雑なレイアウトでも、:is()を使えばスマートに記述可能です。
カードデザイン
.card :is (h2, h3, p) {
margin-bottom: 1rem;
}
.card :is (img, video) {
width: 100%;
height: auto;
}コンテンツが増えても、追加修正が楽チンになります！
疑問点
Q. :is()の中に:is()はネストできるのか？
できる。
ただし、読みやすさが低下するので、多用は避けましょう。
:is (header :is (h1, h2), footer :is (h3, h4)) {
font-weight: bold;
}こんな感じで書くことも可能です。
【まとめ】CSS設計の質を高めるなら:is()を使いこなそう
CSSの:is()擬似クラスをマスターすれば、
コードはスマートに、メンテナンスは楽に、デザイン変更も素早くなります。
また、:where()や:has()といった関連機能も合わせて覚えることで、
よりモダンなWebサイト設計が可能になります。
Webデザイン・コーディングのレベルをワンランク上げるために、
ぜひ今日から実践してみてください！