Question

I’ve got some css code styling a textbox like this:

input#address
{
   border: 1px solid #dbdbdb;
}

I want to show a red border around that textbox if there’s a validation error, so I also have this class:

.error
{
   border: 1px solid red;
}

And I add this class to the textbox element using JavaScript if there’s an error. However it seems that the browser disregards this class because of the earlier code assigning a different border to the textbox. How do I solve this?

Also, I’d like to keep .error as a reusable class which can be used on other elements while solving this issue.

Answer 1

Try adding !important to the error rule, it’s not specific enough otherwise and gets overridden by the very specific input#address.

.error
{
   border: 1px solid red !important;
}