CODEWITHSUNDEEP
css
shan
shan

Reputation: 3165

Reason why this background color won't override the other?

Although it works with !important I would rather avoid using it.. Can anyone explain to me why this won't override the other?

#g1 div div {
    background: #fefefe;
}

#winnar {
    background: #a2f5ff;
}

and the the html

<div>
    <div>Price</div>
    <div id="winnar">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

I thought do to specificity the one at the bottom should override the one on the top? Or is the top one too specific? If so, how can I make the bottom one override the top one? Thanks!

Upvotes: 0

Views: 76

Answers (1)

Oriol
Oriol

Reputation: 288680

I thought do to specificity the one at the bottom should override the one on the top?

No, because the first one has 1 id selector and two tagname selectors. But the second one only has 1 id selector.

Then, the first one wins.

You can find the exact formula here: http://www.w3.org/TR/CSS21/cascade.html#specificity

In general, if you want the second rule to have more specificity, make sure that one rule is contained in the other:

#g1 div div { background: #fefefe; }
#g1 div div#winnar { background: #a2f5ff; }

But in this specific case better use

#g1 div div { background: #fefefe; }
#g1 #winnar { background: #a2f5ff; }

But be aware that multiple descendant selectors can be slow. Try using childhood selectors if possible:

#g1 > div > div { background: #fefefe; }
#g1 #winnar { background: #a2f5ff; }

Upvotes: 3

Related Questions