Select elements with randomly-generated IDs with CSS

Question

I have this markup where the ids are 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 to change the background color of all divs. This is the most specific selector I could think of but it does not work:

div.product[id^="product-"] { background-color: transparent; }

Could this be done without hard-coding ids, using !important and changing HTML markup?

Answer 1

Instead of resorting to !important, you might want to consider using the :not() pseudo-class to increase the specificity of your selector, like this:

div.product:not(#specificity-hack) { background-color: transparent; }

This matches the same elements as your original selector (assuming that specificity-hack is not a possible ID for a product div, which seems likely here), but since selectors inside :not() are included in the specificity calculation, it counts as more specific than the rules you're trying to override.

(The main reason not to use !important if you can avoid it is that it's addictive — the only way to override an !important rule is with another !important rule, so the more you use it, the more you'll find yourself needing it. Eventually, half your CSS rules will be marked !important, and you're basically back where you started, except that now your style sheets are bloated with lots of !important markers, and you've also effectively deprived yourself of the ability to use !important to override normal styles in the rare cases where it's actually legitimately useful, and now have to resort to specificity hacks like the one shown above. Moral of the story: !important is powerful but easy to abuse — don't use it unless you really have to!)

Answer 2

I think this is one of those cases where !important might be the best option.

#product-20625055 {
  background-color: #FC0;
}
#product-66980342 {
  background-color: #0CF;
}
#product-54722210 {
  background-color: #F0C;
}
div[id^="product-"].product {
  background-color: transparent !important;
}

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

Answer 3

All the three id selectors that are used in your snippet have a specificity of 100 whereas the selector which you are using to try and override (div.product[id^="product-"]) has a specificity of only 021 (because it has one class selector, one attribute selector and one element type selector).

You cannot override the id selector unless you use another id selector as part of the full selector (adding an id selector anywhere will suffice) (or) use !important (or) use inline styles. Because unless an id selector is added the first digit will always be 0 and so will be less specific than the id selectors.

Since you cannot hardcode the id of each element (as it is random), the only option would be to add an id to a parent element and then use it as part of the selector like I had mentioned in my comment. The id could be added to a common parent (or) if there is no parent then to the body.

#product-20625055 {
  background-color: #FC0;
}
#product-66980342 {
  background-color: #0CF;
}
#product-54722210 {
  background-color: #F0C;
}
#id div.product[id^="product-"] {
  background-color: transparent;
}

<div id='id'>
  <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>
</div>

Answer 4

Maybe you could choose the div's by class (because they all have the same) and add !important

.product {
   background: transparent!important;
}

Answer 5

use the css !important feature this is useful in situations as you are currently in. But be causious while using it dont use it excesively in your css files. It is used in css to overide rules. Whenever you put it after any css rule that !important will make sure to use that rule over any other rule defined anywhere in any css files you are using.

#product-20625055 { background-color: #FC0 !important ; }
#product-66980342 { background-color: #0CF !important ; }
#product-54722210 { background-color: #F0C !important ; }

Answer 6

Straight from https://developer.mozilla.org/en/docs/Web/CSS/Specificity#The_!important_exception

When an !important rule is used on a style declaration, this declaration overrides any other declarations.

You can use !important to override any css

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

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }

.product {background-color: transparent !important;}

Answer 7

The attribute selector for [id....] needs to be altered to do a prefix value match ([id^="product"]), also since ID will take preference you will need !important after applying the transparent bgcolor. See below for html sample.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        <!--
        #product-20625055 { background-color: #FC0; }
        #product-66980342 { background-color: #0CF; }
        #product-54722210 { background-color: #F0C; }

        div.product[id^="product"] {
            background-color: transparent!important;
        }
        -->
    </style>
</head>
<body>

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



</body>
</html>

Answer 8

Just add to your body or other element which wraps your products some ID and

#product-20625055 {
  background-color: blue;
}
#wrapper .product[id^="product-"] {
  background-color: red;
}

<div id="wrapper">
  <div class="product" id="product-20625055">Product 1</div>
</div>

Answer 9

Selector div.product[id*="product-"] will works! if you have to rewrite already existing property, you have to use !important:

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }

div.product[id*="product-"] {
  background-color: green!important;
}

jsfiddle-link

Answer 10

you can use this

:nth-child(number) {css declarations;} Example:

div.product:nth-child(1){ 
background-color:white; 
}

div.product:nth-child(2){ 
background-color:blue; 
}

div.product:nth-child(3){ 
background-color:yellow; 
}

Answer 11

You can override the ID selector Using this code [id|="product"] or the div.product:not(#product) selector:

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }

/* You Can Use This Selector */
[id|="product"] {
  background-color: transparent !important;
}

/* Or This Selector */
div.product:not(#product) { background-color: transparent; }

<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div id="product-54722210" class="product">Product 3</div>

Another practice is to have classes rather than ids in your css, so they can be easily overrided.

    .product-20625055 { background-color: #FC0; }
    .product-66980342 { background-color: #0CF; }
    .product-54722210 { background-color: #F0C; }
    
    
    .product { background-color:transparent; }
    

<div class="product product-20625055" id="product-20625055">Product 1</div>
    <div class="product product-66980342" id="product-66980342">Product 2</div>
    <div id="product-54722210" class="product product-54722210">Product 3</div>