title: Mark CSS rule as less important?
body: <p>Is there a way to mark a CSS rule as less important, such that it doesn't override a subsequent rule even if the first rule has higher specifically? For example, say I have the following in my CSS file:</p>
  
  <pre><code>#inputDiv input[type="text"]{
      width:125px;
  }
  
  #differentInput1{
      width:25px;
  }
  
  #differentInput2{
      width:500px;
  }
  </code></pre>
  
  <p>The idea I was going for is that all text input fields that are children of the div "inputDiv" get a width of 125px, except for certain specific inputs that get some other width. The problem is that the first declaration overrides the specific item declarations.</p>
  
  <p>I've tried the following:</p>
  
  <ol>
  <li>Append !important to each of the specific widths. Works, but many claim (rightly, I think) that !important should be avoided, and it is rather cumbersome as it must be added to each element with a specific width.</li>
  <li>Prepend #inputDiv to each of the specific selectors, i.e. #inputDiv #differentInput1 Again, works, and avoids the issues with using !important, but still cumbersome as it has to be done to each element.</li>
  </ol>
  
  <p>Is there any way to simply say that the items in the first declaration are less important, and shouldn't override anything? </p>