CODEWITHSUNDEEP
htmlcss
huysentruitw
huysentruitw

Reputation: 28091

Can't override css of element

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

Upvotes: 8

Views: 25480

Answers (5)

Tomzan
Tomzan

Reputation: 2818

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

Upvotes: 3

Kobi
Kobi

Reputation: 137997

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:

Upvotes: 19

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

!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*/}

Upvotes: 4

gp.
gp.

Reputation: 8224

!important will override any style.

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

Upvotes: 1

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

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.

Upvotes: 7

Related Questions