title: error class is overridden by [type="text"] selector
body: <p>I use custom css for my <strong>text</strong> inputs:</p>
  
  <pre><code>input[type="text"]{
      background-color: #f9f9f9;
  }
  </code></pre>
  
  <p>I want to change background color — and more — if validation fails adding an <code>error</code> class with jQuery:</p>
  
  <pre><code>.error{
      background-color: #f9abab;
  }
  </code></pre>
  
  <p>The problem is <code>input[type="text"]</code> selector has precedence and simply the background color keeps unchanged. I can see it in Firebug / Inspect element.</p>
  
  <p>Is adding <code>!important</code> to <code>.error</code> the only way?</p>