Question

Is there any possibility to create CSS definition for any element with the class “icon-” and then a set of letters but not numbers.
According to this article something like:

[class^='/icon\-([a-zA-Z]+)/'] {}

should works. But for some reason it doesn’t.

In particular I need to create style definition for all elements like “icon-user”, “icon-ok” etc but not “icon-16” or “icon-32”

Is it possible at all?

Answer 1

CSS attribute selectors do not support regular expressions.

If you actually read that article closely:

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?

Notice the first three words. They don’t exist. That article is nothing more than a blog post lamenting the absence of regex support in CSS attribute selectors.

But if you’re using jQuery, James Padolsey’s :regex selector for jQuery may interest you. Your given CSS selector might look like this for example:

$(":regex(class, ^icon\-[a-zA-Z]+)")