- From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
- Date: Fri, 16 Jun 2017 09:29:14 +0000
- To: public-css-archive@w3.org
I see. And you're right, there doesn't seem to be more fine grained matching of invalidity except the [`:out-of-range` pseudo-class](https://drafts.csswg.org/selectors/#out-of-range-pseudo).
Note that CSS uses hyphen-separated syntax, not camel case. So, your proposal should rather look like this:
```css
input:value-missing ~ .required { display: block; }
input:too-short ~ .minlength { display: block; }
input:too-long ~ .maxlength { display: block; }
input:pattern-mismatch ~ .pattern { display: block; }
```
Another way would be to allow parameters for the `:invalid` pseudo-class. That would group the different error types. I.e. this could then look like:
```css
input:invalid(value-missing) ~ .required { display: block; }
input:invalid(too-short) ~ .minlength { display: block; }
input:invalid(too-long) ~ .maxlength { display: block; }
input:invalid(pattern-mismatch) ~ .pattern { display: block; }
input:invalid(out-of-range) ~ .outofrange { display: block; }
```
which would allow to match different types of errors by allowing to provide multiple keywords:
```css
input:invalid(too-short, too-long) ~ .invalidlength { display: block; }
```
Furthermore, for empty inputs there is already issue #1283. So empty inputs requiring a value could then also be matched via `input:required:empty`. Though an explicit way to check whether a required field is missing the value is probably nicer and more consistent to the other proposed pseudo-classes.
Sebastian
--
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1525#issuecomment-308979350 using your GitHub account
Received on Friday, 16 June 2017 09:29:20 UTC