SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    What's the Difference Between these CSS Selectors?

    I am hoping to complete my home page menu soon, and I just wanted to know what the differences are between these css selectors...

    Is the following
    Code:
    ul.pMenu ul li ul li ul
    different from:
    Code:
    ul.pMenu ul ul ul
    How does using the > symbol make CSS selections different? For example,
    Code:
    ul.pMenu ul ul ul > li

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    Is the following
    Code:
    ul.pMenu ul li ul li ul
    different from:
    Code:
    ul.pMenu ul ul ul
    Yes, those are the same, assuming that each sub UL is nested inside a LI, as it should be.

    How does using the > symbol make CSS selections different? For example,
    Code:
    ul.pMenu ul ul ul > li
    The > symbol means that the rule is only applied to a LI that is the direct child of the last UL. So that rule would be the same as this:

    Code:
    ul.pMenu ul ul ul li
    So you use > if you only want the rule to apply to the direct child of the UL, and not any LIs that might be further nested below.

    Another example might be:

    Code:
    ul.pMenu > li {color: red}
    If that were applied to a structure like

    Code:
    <ul class=pMenu">
      <li>
        <ul>
          <li>
          </li>
        </ul>
      </li>
    </ul>
    only the top-level LI would be red, whereas with this rule

    Code:
    ul.pMenu li {color: red}
    all of the LIs would be red:

    Code:
    <ul class=pMenu">
      <li>
        <ul>
          <li>
          </li>
        </ul>
      </li>
    </ul>

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Your Reply is...
    AMaZiNg!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    Your Reply is...
    AMaZiNg!!
    Great! You can learn more about it here, if you like, and can hit the Play tab to do some experiments:

    Child Selector (CSS selector)

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    there is ONE IMPORTANT DIFFERENCE between ul.pMenu ul li ul li ul and ul.pMenu ul ul ul, and that is that the latter is MORE specific...

    if you had :
    ul.pMenu ul li ul li ul{ color: red;}
    ul.pMenu ul ul ul{ color: green;}

    your LIs would be green ( this even if ul.pMenu ul ul ul{ color: green;} is placed latter in the code, which is sometimes useful.. tho probably not in this particular example.

    the child selector is also useful.. but it's important to note that older versions of IE did not understand it. so sometimes you wee it used as a hack to WEED OUT old IE.

    for example
    body p{color:green;}
    body>p {color: red }
    the text will be green only in (IE6)...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    the latter is MORE specific...

    if you had :
    ul.pMenu ul li ul li ul{ color: red;}
    ul.pMenu ul ul ul{ color: green;}

    your LIs would be green
    No, they'd be red, as ul li ul li ul is more specific than ul ul ul (it's basically 5 selectors to three).

    E.g.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    ul.pMenu ul li ul li ul{ color: red;}
    ul.pMenu ul ul ul{ color: green;}
    </style>
    
    </head>
    <body>
    <ul class="pMenu">
      <li>test
        <ul>
          <li>test    
            <ul>
              <li>test    
                <ul>
                  <li>test</li>
                  <li>test</li>
                  <li>test</li>
                </ul>
              </li>
              <li>test</li>
              <li>test</li>
            </ul>
          </li>
          <li>test</li>
          <li>test</li>
        </ul>
      </li>
      <li>test
        <ul>
          <li>test</li>
          <li>test</li>
          <li>test</li>
        </ul>
      </li>
      <li>test</li>
    </ul>
    
    </body>
    </html>

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    oops, my bad. I meant ul.pMenu ul li ul li ul{ color: red;} is more specific.. I need coffee... thanks for catching that I didnt want to confuse anyone.


Tags for this Thread

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
  •