CODEWITHSUNDEEP
htmlcsscss-selectors
abc123
abc123

Reputation: 8303

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

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?

Upvotes: 296

Views: 236310

Answers (5)

Freeman
Freeman

Reputation: 12708

I want to share this solution too, maybe in the future it could help someone.
As the others said you can write [id^=product] for id

But we can give an example for the class as well: [class^="product-"] which indicates classes starts with product and also * like this [class*="product-"]

This is a simple example :

/* Icons */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mk-font' !important;
  font-size: 3em;
}

good luck ...

Upvotes: 4

Luigi Spezia
Luigi Spezia

Reputation: 43

I noticed that there is another CSS selector that does the same thing . The syntax is as follows :

[id|="name_id"]

This will select all elements ID which begins with the word enclosed in double quotes.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

[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.

Upvotes: 527

Blender
Blender

Reputation: 298106

I'd do it like this:

[id^="product"] {
  ...
}

Ideally, use a class. This is what classes are for:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

And now the selector becomes:

.product {
  ...
}

Upvotes: 87

Musa
Musa

Reputation: 97672

Use the attribute selector

[id^=product]{property:value}

Upvotes: 8

Related Questions