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