pierrelf.com
Description#
Implement CSS selector matching in the style crate. Given a DOM element and a parsed selector, determine if the selector matches that element.
Acceptance Criteria#
- Match simple selectors against a DOM element:
- Type selector: element tag name matches
- Universal selector: always matches
- Class selector: element has matching class attribute
- ID selector: element has matching id attribute
- Attribute selectors: all forms ([attr], [attr=val], [attr~=val], etc.)
- Match compound selectors (e.g.,
div.class#id— all parts must match) - Match complex selectors with combinators:
- Descendant (space): walk up ancestor chain
- Child (
>): check direct parent - Adjacent sibling (
+): check previous sibling - General sibling (
~): check any previous sibling
- Match selector lists (comma-separated — any one matching is sufficient)
- Calculate specificity for each selector:
- (a, b, c) where a = ID selectors, b = class/attribute/pseudo-class, c = type/pseudo-element
- Inline styles have highest specificity (handled separately)
- Collect all matching rules for a given element
- Write tests covering each selector type, combinators, specificity calculation
Dependencies#
- CSS parser (for selector data structures)
- DOM crate (for element/attribute access)
Implementation Notes#
- Right-to-left matching is the standard optimization (match key selector first, then walk up)
- Performance matters but correctness first