Can't override css of element

Question

I have a website with a global template that contains partial templates, but now I'm stuck with a simple CSS problem:

HTML

<div id="context"> <!-- this is part of global template -->
    <!-- this is rendered by partial template -->
    <select id="test">
        <option>[Select a value]</option>
    </select>
</div>

Global CSS

In a global stylesheet the default width for all <select> elements inside #context is defined:

div#context select
{
   width: 500px;
}

Partial CSS

Now for the partial template (which renders content inside #context), I need to override the default width of <select>. I thought this would be as simple as:

select#test
{
    width: 150px;
}

But I was wrong, it doesn't work. And I guess it is because css thinks div#context select is a better match for the element, because it works when I change the partial template css like this:

div#context select#test
{
    width: 150px;
}

Of course, this is not what I want to do, because the partial template should not know in which node it is rendered inside the global template.

Any ideas on how I can override the style for the partial template without specifying an element from the global template?

See jsFiddle

Answer 1

It is enough to make your selector just a little bit stronger:

body select#test
{
    width: 150px;
}

Example: http://jsfiddle.net/XvZSz/2/

From W3 - CSS Selectors:

A selector's specificity is calculated as follows:

• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the selector (= c)

[...]

Concatenating the three numbers a|b|c (in a number system with a large base) gives the specificity.

So, div#context select is 1 ID and 2 elements: 0|1|2
But: select#test is 1 ID and 1 element (0|1|1) - not as strong.

More info:

• MDN - Specificity
• Specificity Calculator

Answer 2

Try this :

select#test
{
    width: 150px !important;
}

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

Answer 3

!important will override your css

select#test
{
    width: 150px !important;
}

demo

what if your global css has !important

Then you could call body select#test{/*call your css*/}

Answer 4

It's not about "better match" the rule has higher specificity value please check this link

I would recommend to avoid the use of !important You can read about it here. Here several highlights why not to use !important:

1.Encourages sloppy, poorly thought-out code

2.Creates code that is less maintainable

3.Overrides styles declared in user style sheets, thus degrading accessibility