CSS Specificity and what appears to be selective priority

Question

I am using JQuery UI to create a modal window that pops up and prompts you to enter some information into forms. If a user doesn't enter the required information, then the text field is highlighted in red with a red border.

However, because I manually changed the border of the fields, the border is only changing to red for the textarea. Even though I have the same CSS rules for my input and textfield, there is a difference in my result.

Error for Input field:

Error for Textarea:

CSS:

#emailField input, textarea
{
    padding: .7em;
    border-radius: 5px;
    border: 1px solid #999;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error{
    border: 1px solid #fb483d;
    background: #fef1ec url(/Content/themes/css/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
    color: #cd0a0a;
}

When I look at the CSS through the developer console, I see where one is taking precedence over the other. But why should there be any difference?

CSS for Input field:

CSS for Textarea:

Simply put, I'd like a red border around both my input fields and my textarea, but I'd also like to understand why there appears to be selective priority.

Answer 1

Comma selectors do not obey the distributive property.

a b, c matches a b and c; it is not equivalent to a c.

Therefore, your #emailField input selector is more specific than .ui-state-error (since it includes an ID selector), whereas textarea is less specific (since it does not include an ID selector.

Answer 2

It's because you specified the parent for input in your CSS

#emailField input, textarea

So you'll have to make the .ui-.. rules more specific

body #emailField .ui-..

or something similar.

More info on this http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/