jQuery: How to override pseudo style?

Question

So here's the summary

CSS:

input[type="text"]:focus{background:blue;}
.error{background:red;}

Javascript:

if(error){ $('#elementid').focus().addClass('error');

Problem:

The field goes red then goes blue immediately and stays blue when it is in focus.

How do I make the 'error' class take precedence, when the javascript executes and the focus goes to the 'elementid' field and not the :focus class.

Answer 1

You can give .error more specificity, like this:

input[type="text"].error{background:red;}​
//or if shared:
.error, input[type="text"].error{background:red;}​

You can give it a try here, with the same level of specificity, error will win because it's declared later in the CSS.