SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code HTML4Strict:
    <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:

    Code CSS:
    #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:

    Code CSS:
    #socialmediaicons ul {}

    Problem is, I can't just remove the
    Code CSS:
    #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
    Code CSS:
    #social_media_icon_list { }
    take priority over
    Code CSS:
    #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

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried
    Code CSS:
    #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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    If you have two conflicting declarations that can both apply to a particular element:
    • 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.


    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. That explains it. Love these forums when it comes to CSS


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •