SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's the diff betw li#navigation and #navigation li?

    Hi guys,

    I've been reading and trying out CSS but still can't understand this part.

    What is the difference between :
    Code CSS:
    li#navigation {
       font-weight: bold;
    }
    and
    Code CSS:
    #navigation li{
       font-weight bold;
    }

    Can anyone help here?

    Thanks

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hi, and welcome to SitePoint.

    This is an important question.

    li#navigation is a sort of longer version of #navigation:
    it means there's a li with the id of "navigation":

    <li id="navigation">foo</li>

    (#navigation would be parsed a little bit faster in the browser than li#navigation, but sometimes you'll see people do div#someID simply so that they know what kind of element is being targetted when they're reading CSS... so might be better for some humans, but not better for browsers)

    #navigation li (note the space) means a li who is a descendant of someone with the id of "navigation" (usually a ul, but can be any ancestor actually):

    <ul id="navigation">
    <li>foo</li>
    ...
    </ul>

    Note that #navigation li hits any descendant li, so this would hit submenus:

    <ul id="navigation">
    <li><a href="products">Products</a>
    <ul>
    <li>This product also hit by that rule</li>
    <li>This product also hit by that rule</li>
    <li>This product also hit by that rule</li>
    <li>This product also hit by that rule</li>
    </ul>
    </li>
    ...
    </ul>

    Basically, the important thing to know is that when listing CSS rules, the space is actually a type of selector ("general descendant selector"), and not just there for readability. Compare to the direct-child descendant selector: >


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
  •