人によって書き方が異なり負債化するためか、あまり下記のような指定を実際のホームページのソースなどで見かけることはありませんが、自分で作る時には非常に有用なため、書き残しておこうと思います。
✅ :is() / :not() / :has() / :where()
CSSの最新セレクター × 英語の意味で理解する
🔹 :is() — 「〜であるもの」
英語感：
“is” = 「〜である」
CSS用途：
- 複数セレクターを一括指定したいときに使う
- ネストの中で親の共通部分だけ書きたいときにも便利
サンプル：
|
1 2 3 4 |
:is(h1, h2, h3) { font-weight: bold; } |
📌 h1〜h3すべてに太字を適用
🔹 :not() — 「〜でないもの」
英語感：
“not” = 「〜でない」
CSS用途：
- 指定した条件以外の要素にスタイルを当てたいとき
- 除外セレクター
サンプル：
|
1 |
li:not(.active) {opacity: 0.5;} |
📌 .active がついてない liだけ半透明にする
🔹 :has() — 「〜を持っているもの」
英語感：
“has” = 「〜を持つ」「〜が含まれている」
CSS用途：
- 子要素の有無で親要素のスタイルを変えたい
- かつてはJSが必要だった構造的な指定が可能に
サンプル：
|
1 2 3 4 |
.card:has(img) { padding-top: 2rem; } |
📌 .card の中に img がある場合だけ、余白を追加
🔹 :where() — 「〜において（どれでも）」
英語感：
“where” = 「〜において」「どれでも（条件に合うものなら）」
CSS用途：
:is()と同じく複数セレクターをまとめられる- ただし！CSSの優先度（specificity）をゼロにする
サンプル：
|
1 2 3 4 |
:where(header, footer, nav) { margin: 0; } |
📌 共通要素にリセットスタイルを適用するのに最適
👉 優先度が低いので、あとから他のスタイルで簡単に上書きできる
✅ まとめ：英語 × CSS の対応表
| セレクター | 英語の意味 | 主な使いどころ | 優先度 | サンプル例 |
|---|---|---|---|---|
:is() | 「〜である」 | 複数のセレクターをまとめたい | 高（通常通り） | :is(h1, h2) |
:not() | 「〜でない」 | 除外したい条件があるとき | 高（通常通り） | li:not(.active) |
:has() | 「〜を持っている」 | 子要素の有無に応じて親を変えたい | 高（通常通り） | .box:has(img) |
:where() | 「どれでも、において」 | 共通スタイルのリセットや軽量指定 | 低（0） | :where(nav, footer) |
✨ こんな覚え方もあり！
:is()→「これらであるならスタイルする」:not()→「これらでないならスタイルする」:has()→「中にこれがあるならスタイルする」:where()→「これらどれでもOK（でも優先度低い）」
✅ :is()系に似たCSS疑似クラス・セレクター一覧
英語的に読める / 条件文っぽいCSSセレクターを中心に整理します。
🔷 条件っぽい意味のセレクター
| セレクター | 読み感 / 英語的意味 | 用途・説明 |
|---|---|---|
:is() | 「〜である」 | 複数のセレクターをまとめる |
:not() | 「〜でない」 | 指定したものを除外する |
:has() | 「〜を含んでいる」 | 子要素を見て親にスタイルを適用 |
:where() | 「どれでも（条件付き）」 | :is()と同じ構文＋優先度ゼロ |
🔷 状態を表すセレクター（状態動詞系）
| セレクター | 英語的意味 | 説明 |
|---|---|---|
:hover | 「ホバーしている」 | マウスカーソルが乗っているとき |
:focus | 「フォーカスされている」 | 入力や選択状態にあるとき |
:checked | 「チェックされている」 | チェックボックスなど |
:disabled | 「無効である」 | ボタンや入力など |
:enabled | 「有効である」 | ↑の逆 |
:required | 「必須である」 | フォーム要素など |
:optional | 「任意である」 | フォーム要素など |
:read-only | 「読み取り専用である」 | フォームなど |
:read-write | 「編集可能である」 | ↑の逆 |
📌 これらは「〜である」という 状態判定 セレクター。:is() に近いニュアンスを持つ。
🔷 構造に関するセレクター（関係詞っぽい）
| セレクター | 英語的意味 / 説明 |
|---|---|
:first-child | 最初の子である |
:last-child | 最後の子である |
:nth-child(n) | n番目の子である |
:nth-of-type(n) | 特定タグのn番目 |
:only-child | 唯一の子である |
:empty | 中身が空である |
📌 :has() ほど強力ではないが、「構造ベースの条件」として組み合わせに使える。
🔷 HTML属性に関する疑似クラス（英語的に意味をもつ）
| セレクター | 英語感 | 説明 |
|---|---|---|
[attr] | 「属性を持つ」 | input[required] など |
[attr=value] | 「属性が=である」 | a[target=_blank] など |
👉 :has() 的な「〜を持ってる」ニュアンスに近い使い方ができる。
✅ 英語っぽく読める疑似クラスまとめ
| カテゴリ | セレクター例 | 英語的意味 |
|---|---|---|
| 条件系 | :is(), :not(), :has(), :where() | 〜である／ない／含む／任意 |
| 状態系 | :hover, :checked, :disabledなど | 〜している／された |
| 構造系 | :first-child, :only-child | 最初・唯一など |
| 属性セレクター | [attr], [attr=value] | 〜という属性を持つ |
✅ 似た書き方を組み合わせると？
|
1 2 3 4 |
button:is(:hover, :focus):not(:disabled) { background-color: blue; } |
👉 ホバー or フォーカスされてて、無効でないボタンにだけ適用する
📝 まとめ
CSSセレクターはただのルールじゃなく、英語的に読める「条件文」みたいなものです。
:is()で「〜である」、:not()で「〜でない」、:has()で「〜を持つ」など、意味が直感的に伝わるので、うまく使えばCSSがまるで会話文のように書けます。