Grow your CSS skills. Land your dream job.

tag#id vs #id

  • # August 1, 2008 at 2:40 pm

    I was wondering why in some cases just the #id is used, but in some other cases tag#id is used. It makes sense to me for classes since you can have multiple classes in a page, but not for ids. It’s probably a beginner’s question, but that’s what I am. :D

    To take it further, sometimes I see things like this:
    body#pagewrap ul#nav li.contact a

    Why not start that from the li or ul if needed?

    These things are still kinda confusing for me, but I’m getting there in my CSS journey.

    Thanks!

    # August 1, 2008 at 10:01 pm

    I think it’s mostly used to up the specificity rating of the selector. You get one extra bonus specificity point for declaring the tag as well. The difference between tag#id and #id is pretty negligible, but the difference between .nav-link and div#menu ul li a.nav-link is pretty huge as far as a difference in specificity value. Say you have a style for .nav-link and you have a style for div#menu ul li a. Then in your HTML, you have:

    <div class="bbcode_code">
      <div class="bbcode_code_head">
        Code:
      </div>
    
      <div class="bbcode_code_body" style="white-space:pre">
        <div id="menu">
          <ul>
            <li>
              <a class="nav-link"> ...</div> </div> <br />
    

    The div#menu ul li a styling will trump the .nav-link styling because it has more specificity points. Can get pretty confusing, so it’s better to be as specific as you can be.

    # August 2, 2008 at 11:14 am

    Ok, that makes total sense. It’s all about the specificity. I think it was just throwing me off sometimes seeing declarations with a bunch of tags, and looking over their whole document they didn’t need to go that far. Maybe they’re being specific for future changes, who knows.

    Thanks for the clarification. :thumbsup:

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".