こんにちは、戦うエンジニア応援団長です。
jQuery 時代の長〜い複合セレクターに疲弊していませんか？
今日はCSS4 セレクターの新星 :is() と :where() を使い、
可読性＆保守性 を爆上げするワザをサクッと紹介します。
Contents
1. :is() とは？
:is() は “マッチング条件をまとめる” セレクター。
以下 3 行を…
article h1,
article h2,
article h3 { margin-top: 1.2em; }この 1 行に集約！
article :is(h1, h2, h3) { margin-top: 1.2em; }- 可読性アップ：どの要素が対象かパッと分かる
- 重複ミスゼロ：編集箇所が 1 行のみ
2. Specificity の違い：「:is()」は強い、「:where()」は弱い
| セレクター | Specificity |
|---|---|
:is() | 内部で最も高い値を引き継ぐ |
:where() | 常に “0”（超弱い） |
:where() を使うと「上書きされる前提」のリセット用 CSS が書ける：
/* margin の初期化 */
:is(h1, h2, h3),
:where(h4, h5, h6) { margin: 0; }3. 実務 Tips──WordPress テーマに置き換えてみる
テーマ CSS でよく見る “階層セレクター” を整理：
/* BEFORE */
.sidebar .widget ul li,
.sidebar .widget ol li,
.sidebar .widget menu li { list-style: none; }
/* AFTER */
.sidebar .widget :is(ul, ol, menu) li { list-style: none; }WordPress のカスタムブロック CSS を書くときにも有効です。
作業時間がギュッと短縮できるので、ぜひ置換してみてください！
4. 対応状況
- デスクトップ主要ブラウザ：Chrome 88+ / Edge 88+ / Firefox 78+ / Safari 14.1+
- モバイル：iOS Safari 14.5+ / Android Chrome 88+ / Android Edge 88+
ほぼ実務投入 OK！ 旧 Edge、IE は切り捨て推奨です。
まとめ
:is()は複合セレクターのリファクタへ:where()はリセット CSSに便利- Specificity を理解して “狙った強さ” のスタイルを当てよう
これで CSS セレクター地獄からひとつ脱出！
戦え、エンジニア諸君！！🧩🔥