LebGeeks

Joe

Member

Smart CSS selectors

Here's a simplified HTML code:

<div id="recent_0"> </div>
<div id="recent_1"> </div>
<div id="recent_2"> </div>

Is there a way to select all these tags in one CSS? Something like #recent_*? Or maybe using a regex?

xterm

Moderator

Re: Smart CSS selectors

I don't believe that's possible without hacks, your best bet is either wrapping them in a parent div and styling that or applying the same class to each one of them.

Then again, i'm not CSS expert so i might be wrong.

rolf

Member

Re: Smart CSS selectors

There is something in CSS3:

E[attr^="name"]
Matches an E element whose "attr" attribute value begins exactly with the string "name" (Source: W3C)

So I guess this would work, without changing your source:

div[id^="recent_"] {
      /* style goes here */
}

Supported in IE 7+ and all others.

Source:
http://kimblim.dk/css-tests/selectors/

As a fallback, or if you want the power of regular expressions, you could do this:
Make a regex replace on your source, in your editor, like:

/id="recent_([0-9]+)"/id="recent_\1" type="recent"/

Then you can have:

div[type="recent"] {
      /* style goes here */
}

CSS2.1 also supported in IE 7+ and all others.

Last edited by rolf (April 23 2010)

Joe

Member

Re: Smart CSS selectors

It worked, thanks!

I used this attribute

E[attr^="name"]

It also worked with jQuery ^^

My job is easier all of a sudden :-)

Last edited by Joe (April 23 2010)

rolf

Member

Re: Smart CSS selectors

With jQuery too, cool!
You're welcome...

pikatore

Member

Re: Smart CSS selectors

handy, thanks for that!

Ayman

Member

Re: Smart CSS selectors

Very nice and useful feature, thanks rahmu for bringing up the issue and thanks rolf for the help :)