[css-selectors] add numeric comparisons on attribute values

[liamquin]

Can we have numeric comparisons?

e.g.
[data-balance<0] { color: red; } (common in accounting/finance, along with putting ( ) around the value)
[data-eyes>7.9] { color: black; background-colour: yellow } /* spider! */

with < <= > >=

Noting that testing for equality is string equality so testing 06=6 fails, an alternative design might be to calc() to fetch an attribute value, and to be allowed in selectors, but that's more complex.

Maybe a new section inhttps://drafts.csswg.org/selectors/#attribute-selectors for Numeric Attribute Values?

[Loirooriol]

There is already #354, which has various proposals like this. But not sure if it's better to split them among multiple subissues, like this one.

[liamquin]

Thanks @Loirooriol - i don't know why i didn't find 354 when i was searching. On the other hand maybe considering numeric values by themselves might make them easier to get adopted.

[bramus]

(Cross-post from #354)

To numerically compare attribute values today, authors can work around this by:

1. Injecting all the values that the item is not equal to, using data-* attributes.
2. Using the CSS Attribute “Value Contains” Selector (e.g. [attribute~=value]) on those data-* attributes.

I’ve detailed this nasty and cumbersome hack back in the day over at https://www.bram.us/2016/10/13/css-attribute-value-less-than-greater-than-equals-selectors/.

[romainmenke]

Can a flag like i help?

• [foo="bar" i] matches cases insensitively
• [foo="1e1" n] switch to numeric comparison. (matches <div foo="10">, <div foo="010"> <div foo="10.00">)

[Loirooriol]

It's not much clear how n would work with ^=, $=, etc.
And it could cover some usecases, but it doesn't address inequalities < <= > >=

[tabatkins]

It's not much clear how n would work with ^=, $=, etc.

I assume it wouldn't. Using it would be a syntax error.

And it could cover some usecases, but it doesn't address inequalities < <= > >=

Right, inequalities are vital for this use-case, so this wouldn't really help.

A flag doesn't really add anything anyway - attribute selectors currently require the value to be an ident or a string, so numbers are invalid. Thus [foo=5] would already unambiguous as a numeric comparison rather than a string comparison.