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_matches | 1つの要素をテストする |
parse | セレクタテキストをSelectorListにパースする |
specificity | 特異性タプルを計算する |
HasPseudoClass | 構造化された:has()形式 |
AttributeSelector | 演算子付き属性マッチャー |