CSS ID starting with some string having highest priority

Question

Scenario: I have a class with width important property. I got some div's with dynamic id's like product1, product2, product3 and so on..

Problem: I want to override the width property defined by the class on the Id's. I tried using [id^=product]{} , but element selector has less priority the class selector, so it cannot override it. Parents elements cannot be created on the div so inherited css will also not work. Is there any selector I can use to override the class property (I know that I need to use important to override but priority is the issue over here)

Adding JSFiddle: http://jsfiddle.net/h7vten2v/1/

.someClass.modal{
    width:100px !important;
    border:1px solid #4c4c4c;
}
[id^=prod]{
      width:50px !important;
}

<div id="product1" class="modal someClass">Test</div>
<div id="product2" class="modal someClass">Test</div>
<div id="product3" class="modal someClass">Test</div>
<div id="product4" class="modal someClass">Test</div>

Answer 1

One attribute selector is equally specific to one class selector. But here you have two class selectors, which is more specific than just one attribute selector. And since both rules have important width declarations, the order of precedence is not changed at all by !important — the first rule will override the second by specificity alone.

You can fix this by balancing the specificity, by adding the two class selectors to the second rule:

.someClass.modal{
    width:100px !important;
    border:1px solid #4c4c4c;
}
.someClass.modal[id^=prod]{
      width:50px !important;
}

<div id="product1" class="modal someClass">Test</div>
<div id="product2" class="modal someClass">Test</div>
<div id="product3" class="modal someClass">Test</div>
<div id="product4" class="modal someClass">Test</div>