How to get CSS to select ID that begins with a string (not in Javascript)?

html css css-selectors
guptron picture guptron · Jul 16, 2012 · Viewed 149.1k times · Source

If the HTML has elements like this:

id="product42"
id="product43"
...

How do I match all of those id's starting with "product"?

I've seen answers that do this exactly using javascript, but how to do it with only CSS?

Answer

Niet the Dark Absol picture Niet the Dark Absol · Jul 16, 2012 
[id^=product]

^= indicates "starts with". Conversely, $= indicates "ends with".

The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.

See the specs for full information.

Related questions

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML: <html class="printable"> <body class="printable"> <h1 class="printable">…

Read More
CSS selector for text input fields?

How can I target input fields of type 'text' using CSS selectors?

Read More
How can I style even and odd elements?

Is it possible to use CSS pseudo-classes to select even and odd instances of list items? I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items: <html> <…

Read More