Regex Matching Attribute Selectors

They don’t exist, but wouldn’t that be so cool? I’ve no idea how hard it would be to implement, or how to expensive to parse, but wouldn’t it just be the bomb?

Let’s say I have a bunch of elements, all with similar class names, which have some shared styling but also need individual rules, for example:

<ul id="menu">
	<li id="menu-home"><a href="/">Home</a></li>
	<li id="menu-products"><a href="/products/">Products</a></li>
	<li id="menu-about"><a href="/about/">About</a></li>
</ul>

I could do image replacement on those list-items to create a graphical navigation bar, with rules like this:

#menu li
{
	background:none #fff no-repeat;
}

#menu li#menu-home
{
	background-image:url("home.png");
}

#menu li#menu-products
{
	background-image:url("products.png");
}

#menu li#menu-about
{
	background-image:url("about.png");
}

Not too bad, but as the structure grows in size, so the CSS grows too. If the structure got very large so the CSS would become equally verbose; not to mention the fact that I have to manually edit it each time a new item is added.

But what if I could just do this:

#menu li[id%="/^menu-([a-z]+)$/"]
{
	background-image:url("$1.png");
}

Now my menu styles are infinitely extensible — I can add any number of new items, without ever having to touch the CSS!

Just a thought…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • MikeWhoBikes

    A very interesting idea; I can see this potentially saving a lot of time for long lists and in other special cases. Would it be possible to do something similar with Javascript (possibly jQuery or similar) to modify CSS rules on-the-fly based on ids?

  • Israel

    This is definately possible with javascript, jquery especially.

  • Ben Johnson

    This would be extremely easy to implement in SASS. Maybe it already is? I haven’t look at the documentation lately. But if you want to write CSS the way it should be, take a look at SASS.

    • Roy Tomeij

      As a matter of fact, it’s completely impossible to do this in Sass. Sass can’t read anything from the DOM; you would still need to @each over an array of manually added items. Nothing automatic there :-)

  • http://www.idoe.be/ GeertDD

    Oh, I would so love that! Genius idea.

  • Sergeant Rock

    Er – unless I’m being dumb… these already (kinda) exist (although not very widely implemented yet):

    From CSS 3:

    E[att^=”val”] Matches any E element whose att attribute value begins with “val”.
    E[att$=”val”] Matches any E element whose att attribute value ends with “val”.
    E[att*=”val”] Matches any E element whose att attribute value contains the substring “val”.

    I mean, they’re not regex’s, but they’re not bad…

  • Jonathan Snook

    Agreed, I think that’s a fantastic idea. To the W3C, Batman!

  • Ahmad Alfy

    Does it validate?

  • Anonymous

    Imagine indeed… taking output from a CMS (e.g. a list of pages), giving the element an ID value based on the value of the outputted text, passing through the value to the stylesheet then having the background image be the URL to a server-side script that outputs an image based on the querystring which contains that text value…. maybe thats taking it a bit too far!

  • http://www.brothercake.com/ brothercake

    @Sergeant Rock – yeah CSS3 has some substring-matching selectors, and they’re implemented in all recent browsers (Firefox 2+, Opera 9+, Safari 3+).

    But like you say, they’re not regexes, they’re limited to known substrings. But it was the potential for backreferences that most interested me in this idea.

  • http://www.cemerson.co.uk Stormrider

    This would be fantastic. I remember one of the reasons they haven’t implemented variables in CSS yet is something to do with CSS being about the styles only, and introducing variables would be outside the scope of the language or something, which I find a bit silly really. The purpose of the language is still about styles, it just means instead of repeating declarations everywhere for colour, you can set it once at the top and use variables down below, for even easier updating of styles – or set padding/margin values which are used in several places (as they often are).

    I think CSS needs to evolve a bit to include things like this, and variables, and it would be great to see them and create an even better way of applying styles. It would save on lots of bandwidth as well, make things more compact and scalable as well.

  • envisean

    @James,

    I really think this is overall a great idea, but I can also see how it can have its flaws. This could only apply to a global fixed-width image for menu items, and many times people will have variable width elements (yes, this could be tweaked with a dom:loaded js iterator). This could also break the technique of matrix menus as well. I think this is an interesting use-case where this could definitely save time and CSS-sanity, but in the end, I agree with the W3C, this is a bit more programming/logic than it is presentation. Although, I would love something like to clean up CSS code :)

  • Toby Somerville

    @Stormrider – It would be great to be able to use variables and perhaps even pass them in the query string.

    One other thing I’d love to see a declaration that removed all styling. Something like:

    body{
    style: remove;
    }

    That way you wouldn’t have to reset all the properties if you wanted to start from a “clean sheet”.

  • http://www.cemerson.co.uk Stormrider

    but in the end, I agree with the W3C, this is a bit more programming/logic than it is presentation

    These are different things though. The end result is that the CSS controls the presentation, but this has no bearing on what should be able to be done within the stylesheet as well. Why can’t you have more advanced programming in a stylesheet? Its still all only about the styles.

    I just never understand this argument at all.

  • http://www.evanbot.com ETbyrne

    You can already do that easily with PHP. I have to admit I like the concept though.

  • ctx2002

    what next , add if , else, while loop into css?

    • Roy Tomeij

      That’s been possible for ages. It’s called Sass/Less/etc.

  • http://www.cemerson.co.uk Stormrider

    Why not?