W3C home > Mailing lists > Public > www-style@w3.org > March 2004

Re: Proposal: regular expressions (or wildcards) in selectors

From: Christoph Päper <christoph.paeper@tu-clausthal.de>
Date: Tue, 16 Mar 2004 19:49:03 +0100
Message-ID: <064201c40b87$5a95be30$3ef4ae8b@heim4.tuclausthal.de>
To: <www-style@w3.org>
Cc: "Alan Plum" <ashmodai@mushroom-cloud.com>

*Alan Plum*:
> Especially with browsers which for some reason do not understand how to
> handle elements with multiple classes in HTML, some people wish there
> was a way to have some kind of wildcard in an ID or class selector.

I fail to see how this two issues connect.
Some new additions to CSS don't help with bugs or non-implementations in
existing browsers.

> *[class=regexp(/myclass-(a|b)[0-9]+/)] {/* ... */}

You'd probably better take the usual CSS approach and put some (ASCII,
non-letter) character in front of the equals sign to designate a RegEx
following, e.g.

  *[class@="/myclass-(a|b)[0-9]+/"] {/* ... */}
  *[class%="/myclass-(a|b)[0-9]+/"] {/* ... */}
  *[class§="/myclass-(a|b)[0-9]+/"] {/* ... */}
  *[class/="myclass-(a|b)[0-9]+"] {/* ... */}

CSS3 Selectors already covers the most general cases with '*=' (contains),
'^=' (starts with) and '$=' (ends with).

  *[class|="myclass"] {/* ... */}

and even more

  *[class^="myclass-a"], *[class^="myclass-b"] {/* ... */}

come already close to what you want to achieve.

> For now a wildcard character would be enough, eg:
> *[class=myclass-a~5] {/* ... */}

Who says the tilde wasn't allowed in the attribute's content?
I think the better approach is to require the match of two attribute selectors
like so:

  *[class^="myclass-a"][class$="5"] {/* ... */}

That should work just fine with CSS3 Selectors (and therefore in Gecko based
browsers). At least I don't recall a restriction that each attribute selector
must be using a different attribute. That said, you could extend the selectors
from above:

  *[class^="myclass-a"][class$="0"], *[class^="myclass-b"][class$="0"],
  *[class^="myclass-a"][class$="1"], *[class^="myclass-b"][class$="1"],
  *[class^="myclass-a"][class$="2"], *[class^="myclass-b"][class$="2"],
  *[class^="myclass-a"][class$="3"], *[class^="myclass-b"][class$="3"],
  *[class^="myclass-a"][class$="4"], *[class^="myclass-b"][class$="4"],
  *[class^="myclass-a"][class$="5"], *[class^="myclass-b"][class$="5"],
  *[class^="myclass-a"][class$="6"], *[class^="myclass-b"][class$="6"],
  *[class^="myclass-a"][class$="7"], *[class^="myclass-b"][class$="7"],
  *[class^="myclass-a"][class$="8"], *[class^="myclass-b"][class$="8"],
  *[class^="myclass-a"][class$="9"], *[class^="myclass-b"][class$="9"]
   { /* ... */ }

Still not the same, though, and quite lengthy.
Received on Tuesday, 16 March 2004 13:52:17 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:27 GMT