Re: [csswg-drafts] [selectors] Declarative custom `:state()` states (#12502)

Something that I do really like about this proposal is how it does really smooth over selectors and create a consistent API:

```css
@state checkbox {
 matches: input[type="checkbox"]:not([switch]);
}

@state checkbox {
 matches: foo-checkbox;
}

@state checked {
 matches: :checked;
}

/* I don’t like this selector, but I like that it creates a consistent API */
:state(checkbox):state(checked) {
}
```

I wonder if we could achieve something to that effect with just a an `@alias` at-rule and `:alias()` functional pseudo-class that would act as a space for completely custom selectors for the context (i.e. regular selectors will not work).

```css
/* This is an element alias */
@alias checkbox {
 matches: input[type="checkbox"], foo-checkbox;
}

/* This is a pseudo-class alias */
@alias :checked {
 matches: :checked, :state(checked);
}

/* within `:alias()` is a completely custom selector */
:alias(checkbox:checked) {
 
}

/* This does not match `input:disabled` */
:alias(input:disabled) {
 
}
```

-- 
GitHub Notification of comment by knowler
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12502#issuecomment-3097979149 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 21 July 2025 18:45:51 UTC