CSS 선택자
CSS 선택자
셀렉터 엔진은 CSS 선택자 텍스트를 구조화된 형태로 파싱하고 DOM 트리와 비교하여 평가합니다. 직접 쿼리와 캐스케이드 규칙 매칭을 모두 지원합니다.
셀렉터 실행
select()는 선택자를 트리에 적용해 일치 항목을 반환하고; element_matches()는 단일 요소를 테스트합니다. 두 함수 모두 타입, 클래스, id, 속성, 그리고 의사 클래스 선택자를 포함한 표준 선택자 구문을 지원하며, 복합 및 복잡한 조합도 허용합니다.
파싱된 선택자 구조
parse()는 ComplexSelector와 CompoundSelector 항목으로 구성된 SelectorList을 생성하며, 이는 TypeSelector, ClassSelector, IDSelector, AttributeSelector( AttributeOperator 포함), UniversalSelector, Combinator 부분으로 구성됩니다.
의사 클래스
함수형 의사 클래스는 명시적으로 모델링됩니다: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, 그리고 구조적 nth-child 변형은 NthFilteredChildPseudoClass와 NthArgument를 통해 제공합니다.
Specificity
specificity()은 선택자에 대한 표준 3요소 튜플을 계산하고, max_specificity()은 목록을 축소합니다; match()은 파싱과 평가를 연결합니다. 이러한 값은 캐스케이드가 사용하는 값과 동일하므로, 쿼리 결과와 계산된 스타일이 항상 일치합니다.
팁 및 모범 사례
- 필터 내부에서
element_matches()을(를) 사용하고 요소마다select()을(를) 다시 실행하지 마세요. - 한 번 파싱하고 동일한 선택기가 여러 트리에서 실행될 때
SelectorList를 재사용합니다. - 규칙이 예기치 않게 캐스케이드를 잃을 경우,
specificity()값을 직접 비교합니다.
일반적인 문제
| 문제 | 원인 | 해결 방법 |
|---|---|---|
| 선택자가 아무것도 일치하지 않음 | 선택자 텍스트에 구문 오류 | parse()가 syntax_error을 통해 발생합니다 — 메시지를 확인하세요 |
| 동일 특이성의 동점이 “잘못된” 결과를 초래합니다 | 순서 의존성 | 후속 규칙이 동점을 이긴다; 규칙 순서를 확인하세요 |
:is() vs :where() 혼동 | :where()는 특이성이 0입니다 | 의도한 캐스케이드 가중치에 따라 선택하세요 |
FAQ
요소 하나를 선택자에 대해 어떻게 테스트하나요?
element_matches() — 트리를 스캔하지 않고 부울 값을 반환합니다.
특이도는 어떻게 계산되나요?
specificity()는 표준 (id, class, type) 구성 요소 튜플을 반환합니다; :where() 그룹은 0을 기여합니다.
지원되는 의사 클래스는 무엇인가요?
API의 구조화된 형태: :is(), :where(), :has(), :not() (복잡한 인자를 포함) 및 nth-child 스타일 구조 선택자.
API Reference 요약
| 클래스/메서드 | 설명 |
|---|---|
select | 셀렉터를 트리에 대해 평가한다 |
element_matches | 하나의 요소를 테스트합니다 |
parse | 선택자 텍스트를 SelectorList 로 파싱합니다 |
specificity | 특이도 튜플을 계산합니다 |
HasPseudoClass | 구조화된 :has() 형식 |
AttributeSelector | 연산자를 사용한 Attribute matcher |
