CSS セレクター
CSS セレクターモジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその詳細度とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。
CSS では、セレクターはスタイルを設定したい要素と照合、または選択するために使用されるパターンです。セレクターは JavaScript でも使用され、 NodeList として返すDOMノードを選択することができます。
セレクターは、 CSS でも JavaScript でも、 HTML 要素の型、属性、現在の状態、さらには DOM 内の位置に基づいてターゲットを絞ることができます。結合子は、他の要素との関係に基づいて要素を選択できるようにすることで、要素を選択する際により正確に行えるようにします。
リファレンス
結合子とセパレーター
CSS セレクターモジュールでは、列結合子 (||) も導入されています。現在、この機能に対応しているブラウザーはありません。
セレクター
:active:any-link:autofill:buffering:checked:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future:has():hover:in-range:indeterminate:invalid:is():lang():last-child:last-of-type:link:matches()（旧式のセレクターで、:is()の別名）:modal:muted:not():nth-child():nth-of-type():nth-last-child():nth-last-of-type():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:root:scope:seeking:stalled:target:user-invalid:user-valid:valid:visited:volume-locked:where():-webkit-擬似クラス- 属性セレクター
- クラスセレクター
- ID セレクター
- 要素型セレクター
- 全称セレクター
CSS セレクターモジュールは、 :blank、:current、:local-link、:target-within の各擬似クラスも導入しています。現在のところ、これらの機能に対応しているブラウザーはありません。
用語
ガイド
- CSS セレクターと結合子
-
CSS セレクターと CSS 擬似モジュールで定義されている、さまざまな種類の単純なセレクターとさまざまな結合子の概要です。
- CSS セレクターの構造
-
CSS セレクターの構造と、CSS セレクターモジュールで紹介されている用語について、「単純なセレクター」から「寛容な相対セレクターリスト」まで解説しています。
- 擬似クラス
-
擬似クラスは、文書ツリーには含まれない状態情報に基づいて要素を選択できるようにするセレクターの一覧で、さまざまな CSS モジュールや HTML で定義されています。
- セレクターでの
:target擬似クラスの利用 -
:target擬似クラスを使って、 URL のフラグメント識別子をターゲット要素にスタイルを設定する方法を学びます。 - プライバシーと
:visitedセレクター -
ユーザーのプライバシー保護のために、
:visitedクラスに設定されているスタイル制限を追求します。 - CSS の構成要素: CSS セレクター
-
基本的な CSS セレクター入門で、要素型、クラス、ID によるセレクター、属性セレクター、擬似クラスと擬似要素、結合子のチュートリアルがあります。
- 学習: UI 擬似クラス
-
さまざまな状態のフォームをスタイル設定するために利用できる、さまざまな UI 擬似クラスについて学びます。
- セレクターを使用した DOM 要素の特定
-
セレクター API を使用すると、 JavaScript でセレクターを使用して DOM から要素ノードを取得できます。
関連概念
-
state()擬似クラス -
CSS 入れ子 モジュール
-
CSS スコープモジュール
:host擬似クラス:host()擬似クラス:host-context()擬似クラス:has-slotted擬似クラス::slotted擬似要素
-
CSS オーバーフローモジュール
-
CSS 段組みレイアウトモジュール
-
CSS ページメディアモジュール
-
CSS 擬似要素モジュール（HTML に含まれないものを表すために使用）
-
::part擬似要素
-
その他の擬似要素
-
@namespaceアットルール !important-
NodeList.forEach()メソッド
仕様書
| Specification |
|---|
| Selectors Level 4 |