Question

I have a div that i have added a border style to. However when I try to add a CSS class to it the div style over rides it.

if ($("#input-whatmask").val() != '')
        {
            if(!searchReg.test($("#input-whatmask").val())){
                $("#input-whatmask").addClass("errorinput").after('<span class="error">Enter a valid value.</span>');
                hasError = true;
                return false;
            }
        }

Anyone confirm the correct way / method of doing this ?

Answer 1

i’m sure your problem is because of the css style precedence. a style for an id (#input-whatmask) is more important than one for a class (.errorinput) so nothing will change. to correct that, declare your style as #input-whatmask.errorinput instead of just .errorinput so it will be preferred (id with class is more specific than just id).

to explain how this works exactly (quoting this great article):

Specificity is calculated by counting various components of your css
and expressing them in a form (a,b,c,d). This will be clearer with an
example, but first the components.

• Element, Pseudo Element: d = 1 – (0,0,0,1)
• Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
• Id: b = 1 – (0,1,0,0)
• Inline Style: a = 1 – (1,0,0,0)

An id is more specific than a class is more specific than an element.