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?
Add a comment
|
5 Answers
[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.
answered Jul 15, 2012 at 23:58
Niet the Dark Absol
326k86 gold badges480 silver badges604 bronze badges
6 Comments
abc123
Thanks for the method and explanation, I've edited my question so its more clear. Out of curiosity, is there a way to match a string inside of the id's string?
Niet the Dark Absol
See the specs, they explain it better than I could!
Niet the Dark Absol
@itamar: I appreciate your attempt at editing my answer, but quote are only required if the value contains characters that are not a valid identifier.
product is clearly a valid identifier, and therefore needs no quotes.
nuander
The specificity of this type of selector is very low
Niet the Dark Absol
@Emerald214
:not([id^=product]) |
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 {
...
}
1 Comment
abc123
@Blender, thanks, I chose the other answer because it explains a bit more to me and understand the symbols being used. I can't use classes for this scenario, otherwise, yes it would be nicer.
Use the attribute selector
[id^=product]{property:value}
Comments
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 ...
Comments
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.
3 Comments
Ben Bozorg
How did you notice? reference?
Dessauges Antoine
Doc for this here : w3.org/TR/selectors-3/#attribute-selectors This should select all id which start or equal to "name_id"
Goozak
att|=val is NOT the same as att^=val. From the reference mentioned : The |= selector "Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-". " So an id like "product42" would not be matched by |=, but "product-42" would.