html - Select elements with randomly-generated IDs with CSS -
i have markup ids not known in advance:
#product-20625055 { background-color: #fc0; } #product-66980342 { background-color: #0cf; } #product-54722210 { background-color: #f0c; }
<div class="product" id="product-20625055">product 1</div> <div class="product" id="product-66980342">product 2</div> <div class="product" id="product-54722210">product 3</div>
i need change background color of divs. specific selector think of not work:
div.product[id^="product-"] { background-color: transparent; }
could done without hard-coding ids, using !important
, changing html markup?
instead of resorting !important
, might want consider using :not()
pseudo-class increase specificity of selector, this:
div.product:not(#specificity-hack) { background-color: transparent; }
this matches same elements original selector (assuming specificity-hack
not possible id product div, seems here), since selectors inside :not()
included in specificity calculation, counts more specific rules you're trying override.
(the main reason not use !important
if can avoid it it's addictive — way override !important
rule another !important
rule, more use it, more you'll find needing it. eventually, half css rules marked !important
, , you're started, except style sheets bloated lots of !important
markers, , you've deprived of ability use !important
override normal styles in rare cases it's legitimately useful, , have resort specificity hacks 1 shown above. moral of story: !important
powerful easy abuse — don't use unless have to!)
Comments
Post a Comment