search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.36k stars 641 forks source link

[selectors] Multi-value attribute selectors #6042

Open valtlai opened 3 years ago

valtlai commented 3 years ago

Spec: Selectors

When styling text fields, there are many attribute values to be listed. I’m wondering could there be a syntax for listing multiple attribute values without repeating the attribute name. It could look something like this:

input:not([type = button, checkbox, color, file, hidden, image, radio, range, reset, submit])

which would equal the following:

input:not([type=button], [type=checkbox], [type=color], [type=file], [type=hidden],
          [type=image], [type=radio], [type=range], [type=reset], [type=submit])

For this specific use case, a pseudo-class like :text-input may be better, because listing input types is error prone and a particular input type may be a text field or not, depending on the browser and OS (for example date is a text field in the major desktop browsers but a button in Chrome for Android). However, there may be other use cases for multi-value attribute selectors.

(The original idea of multi-value attribute selectors isn’t mine, but I can’t find the comment where the idea was mentioned. Edit: There’s an inline issue in the spec and a message in the www-style mailing list, but it’s probably good to have a GitHub issue too.)

SebastianZ commented 3 years ago

The idea is obviously not new, though I like it.

As far as I can see, commas are allowed to separate ident tokens. Though it needs to be clarified how string tokens are handled because they may contain commas.

So I guess the following two should be the same:

span[data-x^=foo, bar]
span[data-x^="foo", "bar"]

I.e. it matches all <span> elements with a data-x attribute value starting with either foo or bar.

Though the following is different:

span[data-x^="foo, bar"]

Matching all <span> elements with a data-x attribute value starting with foo, bar.

And what I implied in these examples is that those value lists should be allowed for all attribute selectors.

Sebastian

valtlai commented 3 years ago

@SebastianZ Yeah, I totally agree with you. That’s how I think the syntax should work. Also, I don’t see a reason why not to allow the value lists for all types of attribute selectors.