Re: [csswg-drafts] [Selectors] Numeric or Typed Attribute Value and Pseudo Attribute Selectors (#354)

Recently, I have seen several articles showcasing how to use typed `attr()` for custom HTML attributes within `style()` within `if()` using the recently introduced range syntax, i.e. greater and less than comparisons mostly. Example:

~~~~ css
.item {
  background-color: if(
    style(attr(data-columns type(<integer>)) > 2): green; 
    else: red 
  );
}
~~~~

Though potentially quite useful, this feels and looks very convoluted, with its four levels of parentheses. With this more traditional proposal, it would look way flatter:

~~~~ css
.item {
  background-color: red;
}
.item[data-columns > 2] {
  background-color: green; 
}
~~~~

Alternatively, with nesting, which did not exist natively when this issue was created:

~~~~ css
.item {
  background-color: red;
 &[data-columns > 2] {
  background-color: green; 
}
~~~~

I still believe that automatic type casting as implied above, or weakly typed attribute values (e.g. `#…` operators for numeric comparison), would suffice for this feature:

~~~~ css
.item[data-columns #> 2] {…}
~~~~

The “pseudo-attribute” syntax from the original post could be used for casting to basic types instead:

~~~~ css
.item[data-columns:integer > 2] {…}
~~~~

It would probably be more consistent to reuse the newish syntax from `attr()` etc., but I hope it could avoid `type()`:

~~~~ css
.item[data-columns <integer> > 2] {…}
~~~~

Alas, repeated angle brackets look strange there, but this could be improved by putting the type hint at the other side:

~~~~ css
.item[2 < data-columns <integer>] {…}
.item[<integer> data-columns > 2] {…}
~~~~

In all those years, I have not seen any serious opposition to the proposed Selectors feature itself, so I hope we agree that it can be useful and should be added eventually, hence the WG should finally decide which syntax they prefer! 

They could of course also reject this whole proposal, and close this issue, because value-side quadruple-nested parentheses work so much better.

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


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

Received on Thursday, 20 November 2025 19:32:17 UTC