How to get CSS to select ID that begins with a string (not in Javascript)?
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 ...
Use the attribute selector
[id^=product]{property:value}
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 {
...
}
[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.