Unable to override css element

Question

I have a website with a global template that contains partial templates, but now I'm stuck in 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

The global style sheet defines the default width for all <select> elements inside #context :

 div#context select { width: 500px; } 

Partial CSS

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

 select#test { width: 150px; } 

But I was wrong, it didn’t work. And I think this is because css considers the div#context select be the best match for the element, because it works when I change the partial css template as follows:

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

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

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

See jsFiddle

Answer 1

Enough to make your selector a bit stronger:

 body select#test { width: 150px; } 

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

From W3 - CSS Selectors :

The specificity of the selector is calculated as follows:

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

[...]

The combination of three numbers a | b | c (in a system with a large base) gives specificity.

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

Additional Information:

• MDN - Specifics
• Specifier

Answer 2

Try the following:

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

A rule that has a property ! important will always apply no matter where this rule appears in the CSS document. Therefore, if you want to make sure that the property has always been applied, you will add the property ! Important in the tag.

Answer 3

!important override your css

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

demo

what if your global css has !important

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

Answer 4

This is not about a “better match”, the rule has a higher specificity value, please check the link

I would recommend avoiding use! You can read about it here . Here are a few highlights why not use! Important:

1.Some sloppy, poorly designed code

2. Generates code that is less maintainable

3. Deletes styles declared in user style sheets, thereby reducing accessibility

Answer 5

! important will override any style.

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