CSS セレクタ

CSS セレクタ

セレクタエンジンは CSS セレクタテキストを構造化された形に解析し、DOM ツリーに対して評価します。直接クエリとカスケードのルールマッチングの両方をサポートします。


セレクタの実行

select() はセレクタをツリーに対して評価し、マッチ結果を返します;element_matches() は単一要素をテストします。両方とも標準的なセレクタ構文(タイプ、クラス、ID、属性、疑似クラスセレクタ)を受け入れ、複合および複雑な組み合わせもサポートします。

解析されたセレクタ構造

parse() は ComplexSelector と CompoundSelector のエントリからなる SelectorList を生成し、TypeSelector、ClassSelector、IDSelector、AttributeSelector(AttributeOperator を含む)、UniversalSelector、Combinator の各パーツで構成されます。

疑似クラス

機能的疑似クラスは明示的にモデル化されています: IsPseudoClass、WherePseudoClass、HasPseudoClass、ComplexNotPseudoClass、および NthFilteredChildPseudoClass と NthArgument による構造的 nth-child バリアント。

Specificity

specificity() はセレクタの標準的な3要素タプルを計算し、max_specificity() はリストを縮約します;match() はパースと評価を結びつけます。これらはカスケードが使用するのと同じ値なので、クエリ結果と計算されたスタイルは常に一致します。


ヒントとベストプラクティス

  • フィルタ内では、要素ごとに select() を再実行する代わりに element_matches() を使用してください。
  • 同じセレクタが多数のツリーに対して実行されるときは、一度解析して SelectorList を再利用します。
  • ルールが予期せずカスケードを失ったときは、specificity() の値を直接比較してください。

一般的な問題

問題原因対策
セレクタが何も一致しませんセレクタテキストの構文エラーparse() が syntax_error を通じて発生 — メッセージを確認してください
同等の特異性の競合は「wrong」と解決される順序依存後のルールが同点を上回ります; ルール順序を確認
:is() と :where() の混乱:where() は特異性をゼロに寄与します意図したカスケードの重みで選択

FAQ

要素一つをセレクタに対してテストするにはどうすればよいですか?

element_matches() — ツリーを走査せずにブール値を返します。

特異性はどのように計算されますか?

specificity() は標準的な (id, class, type) コンポーネントタプルを返します; :where() グループはゼロを加算します。

サポートされている擬似クラスはどれですか?

構造化された形は API にあります: :is()、:where()、:has()、:not()(複雑な引数付き)および nth-child スタイルの構造セレクタ。


API Reference 概要

クラス/メソッド説明
selectセレクタをツリーに対して評価する
element_matches1つの要素をテストする
parseセレクタテキストをSelectorListにパースする
specificity特異性タプルを計算する
HasPseudoClass構造化された:has()形式
AttributeSelector演算子付き属性マッチャー

参照

 日本語