- From: Sebastian Zartner via GitHub <noreply@w3.org>
- Date: Wed, 08 Oct 2025 10:19:19 +0000
- To: public-css-archive@w3.org
Given that all commenters are positive about this, I add this to the agenda. And I go ahead and propose a resolution: Turn `:invalid` and `:user-invalid` into functional pseudo-classes taking one of the keywords matching the states defined for `ValidityState`. Iterating on the previous suggestions and the table provided by @alexnozer, here's a complete table of the suggested keywords for the pseudo-classes: | HTML attribute | `ValidityState` | keyword for invalid state | |--------|--------|--------| | - | `badInput` | `bad-input` | | - | `customError` | `custom-error` | | `pattern` | `patternMismatch` | `pattern-mismatch` | | `min` | `rangeUnderflow` | `range-underflow` and `out-of-range` | | `max` | `rangeOverflow` | `range-overflow` and `out-of-range` | | `step` | `stepMismatch` | `step-mismatch` | `maxlength` | `tooLong` | `too-long` | | `minlength` | `tooShort` | `too-short` | | `type` | `typeMismatch` | `type-mismatch` | | `required` | `valueMissing` | `value-missing` | _Note: In some cases multiple states may match, e.g. when there's a pattern mismatch and the string is too short. That would be covered by chaining the pseudo-classes, i.e. `:invalid(pattern-mismatch):invalid(too-short)`._ ----- I am not convinced yet that we also need to distinguish between different _valid_ states. E.g. what's the reason for matching `:user-valid(optimal-length)` when there's a pattern mismatch? Anyway, if there are strong reasons to add them, as well, here's the table listing them: | HTML attribute | `ValidityState` | keyword for valid state | |--------|--------|--------| | - | `badInput` | `accepted-input` | | - | `customError` | - | | `pattern` | `patternMismatch` | `pattern-match` | | `min` / `max` | `rangeUnderflow` / `rangeOverflow` | `in-range` | | `step` | `stepMismatch` | `step-match` | | `maxlength` / `minlength` | `tooLong` / `tooShort` | `optimal-length` | | `type` | `typeMismatch` | `type-match` | | `required` | `valueMissing` | `value-exists` | Sebastian -- GitHub Notification of comment by SebastianZ Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1525#issuecomment-3380827617 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 8 October 2025 10:19:20 UTC