Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 selector for searching numbers in element's ID

CSS3 selector for searching numbers in element's ID

Problem

I want to give a custom CSS property to the specified range of the Elements identified by number in id.

HTML:

...
... too many ...

CSS:

#game div[id$=street-name] { /* I want this selector to get applied only to streets 1-4 */
  font-size: 10px;
}

#game div[id$=street-name] { /* This one to streets 11-14 */
  font-size: 14px;
}

Is there any ways to handle it only by CSS?

Problem courtesy of: Alex G

Solution

You can't select directly by their numbered IDs, as CSS doesn't provide dynamic attribute selectors.

However, if your structure is such that each numbered div corresponds to its position in the #game parent element, you may be able to use :nth-child() instead:

/* First 4 elements */
#game div:nth-child(-n+4) {
  font-size: 10px;
}

/* Elements starting from the 11th and ending at the 14th */
#game div:nth-child(n+11):nth-child(-n+14) {
  font-size: 10px;
}
Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 selector for searching numbers in element's ID

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×