Selectors (core)
CSS の属性セレクター (attribute selector) は、指定された属性が明示的に設定された要素に基づいて要素を照合します。オプションで、属性値または部分文字列の値が一致するように定義します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 1 | |
| その他 | ||||||
| 子結合子 (child combinator) (>) は 2 つの CSS セレクターの間に配置されます。 2 つ目のセレクターが 1 つ目のセレクターの直接の子要素の場合にのみ一致します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS のクラスセレクター (class selector) は、 class 属性の内容に基づいて要素を選択します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| 子孫結合子 (descendant combinator) — 通常は単一の空白文字 (" ") で表される — は 2 つの CSS セレクターを結合し、 1 つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている 2 つ目のセレクターに一致します。子孫結合子を利用したセレクターは 子孫セレクター と呼ばれます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS の ID セレクター (ID selector) は、 id 属性の値に基づいて要素と一致します。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければなりません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS の セレクターリスト (selector list) (,) は、すべての一致するノードを選択します。セレクターリストはカンマ区切りのセレクターのリストです。 | 1 | 12 | 1 | 1 | 18 | 1 |
| 次兄弟結合子 (next-sibling combinator, +) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の直後にあって、両者が同じ親elementの子同士である場合に一致します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| 後続兄弟結合子 (subsequent-sibling combinator, ~) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素があり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| CSS の要素型セレクター (type selector) は、ノード名で要素を一致させます。つまり、文書内にある指定された型の要素をすべて選択します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS セレクタ | ||||||
namespaces 名前空間 (`ns|elementName`) | 1 | 12 | 1 | 1.3 | 18 | 1 |
| その他 | ||||||
| CSS の全称セレクター (universal selector) (*) は、すべての種類の要素に一致します。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS セレクタ | ||||||
namespaces 名前空間 (`*|*`) | 1 | 12 | 1 | 1.3 | 18 | 1 |
基本構文
h1 { color: navy; }
.card > .title { font-weight: bold; }
#main p { line-height: 1.6; }
a[href^="https"] { color: green; }ライブデモ
実務での使いどころ
-
スタイル適用対象の指定
HTML要素に対して、タイプ、クラス、ID、属性、構造的な関係に基づいてスタイルを効率的に適用します。
注意点
- 過度にネストしたセレクター（例：.a .b .c .d .e）はパフォーマンスとメンテナンス性を低下させるため、3階層以内を推奨します。
アクセシビリティ
- セレクターの設計はアクセシビリティに直接影響しませんが、意味的なクラス名を使用することでコードの理解しやすさが向上します。