CSS Conflict

Question

Hello all

Im trying to do a simple :focus effect for all my INPUT elements, like so:

INPUT:focus { border-color: orange; }

This works great, until I add this bit of CSS to the style sheet:

.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial; 
font-size:14px;
padding:3px;
}

Now once I add the above, the focus effect doesnt work on any input within the form_container class, when I take the above out it works.

I can get the effect to work by specifying the class for the INPUT like so:

.form_container .col2 INPUT:focus { border-color: orange; }

But I dont understand why I have to do this? I want to control all INPUT effects like i do in the first example

if any one can shed some light on this thx

Answer 1

That's because

.form_container .col2 INPUT

is more specific than

INPUT:focus

In CSS, more specific rules have higher priority, no matter what the order is in which they were declared. Rules that are equally specific (the same number of selectors usually), the rule declared later overrides or adds to rule declared first.

You could specify !important on your border style for the second rule, but it's not supported in all browsers (did I hear IE?)

Answer 2

In your first rule you're declaring the border color. In your second rule you're overriding it. You could try something like

INPUT:focus { border-color: orange!important; }