Selectors and rank in CSS

I have a serious problem styling an element so that it looks right in IE7.
I always thought that referring to an element by id in the CSS style-sheet will always take priority over all the other CSS rules that refer to that element via other channels i.e. descending selectors. Here is the code:

I have a div that contains a ul with li’s inside.

<div id="socialmediaicons">
  <ul id="social_media_icon_list">
    <li>
    </li>
  </ul>
</div>

Now I am trying to style the ul (id=“social_media_icon_list”) with a CSS selector that looks like this:

#social_media_icon_list { }

but it’s not working. and every time I firebug to check what’s going on I find that another more general, descendant selector is overriding/taking priority over the above mentioned rule. The culprit is this:

#socialmediaicons ul {}

Problem is, I can’t just remove the

#socialmediaicons ul {}

because it has important general rules that affect the style of other parts of the site. It refers to all lists of social media icons elsewhere. So HOW do I make

#social_media_icon_list { }

take priority over

#socialmediaicons ul {}

and why is this problem happening in the first place if selecting the id of an element in CSS is the highest priority way to style something?

Thank You

Thanks everyone. That explains it. Love these forums when it comes to CSS

Noonnope’s suggestion is likely the right approach for overriding the specificity. The parent ID always trumps a child ID… so you need the parent ID in the declaration.

Though I would have to see the whole page, but is there even a NEED for the second ID. (or is it the other way around and you have a div for no good reason?)

Usually when I see a div around a UL and ID’s on both, my gut reaction is SOMETHING there is completely unnecessary… I’d either lose the ID on the UL, or lose the DIV entirely since it is very rare that you would ever need both. Are there other UL’s in that div you are targeting as well? Are you mistakingly using the same ID’s more than once?

If you have two conflicting declarations that can both apply to a particular element:

[list][]if one is declared in an inline style attribute, it wins … or else
[
]if one declaration has more IDs (eg #contenttext) than the other, it wins … or else
[]if one declaration has more classes (eg .cal_month) than the other, it wins … or else
[
]if one declaration has more elements (eg div) than the other, it wins … or else
[*]whichever one is specified last, wins.[/list]

In this case - neither is specified inline, so move onto the next one.
Both declarations include 1 ID, so move onto the next one.
Neither of the declarations include a class, so move onto the next one.
A-ha … one of them has 1 element (ul) in it, so it beats the one that has 0 elements.

Have a look at my section on specificity which shows you how to calculate an elements specificity exactly. There is a step by step example that shows you how to calculate which rule will win out. It may seem awkward or difficult at first but is is really quite straight forward once you get into the details.

All selectors are given a weighting depending on type and the more elements there are in the path the heavier (more specific) the rule becomes. If you use two ids in a rule it will outweigh a single id.

#id ul” will always outshine a single id and you would need to add something else to it to make it more specific. As noonope suggests just adding the previous id to the rule as well will ensure that the new rule trumps the first rule.

have you tried

#socialmediaicons #social_media_icon_list {}

?

and a selector weight is also given by the number and type of the actual selectors used in it. and you have an id vs. an id and an element.