SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu selectors (newbie)

    Hi all,

    I know that li = list item, ul=unordered list, a (I think) = anchor (link) text but I get kinda confused when they are all thrown together.

    For example

    #nav ul ( unordered list occurring in the div 'nav').
    #nav a (anchor text in the div 'nav'.)
    #nav li (list item in the div 'nav'.)
    #nav li li (I think sub-menu list item in the div 'nav'.)
    #nav li li li (I think sub-sub list item)
    #nav li li a (anchor text in a sub-sub list item)
    #nav li ul ul ????????
    #nav li ul li ????????
    #nav li ul li li ????????


    Have I got these right and can anyone please translate the last three or suggest a link that answers this specific question?


    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)
    what you don't "read" there is the css descendant selector. it's a little like matroska dolls

    #nav ul means any ul element in the #nav element (div or not), even if not a direct descendant (jumping levels). in the following example, the two ul's are both descendant, one direct, and both will be targets for the selector:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language"	content="en">
    
      <style>
      
        #nav ul {
          background-color:blue;
          }
    
      </style>
    
      
    
    </head><body>
    
      <div id="nav">
        <ul>
          <li>One in one</li>
        </ul>
        
        <div>
          <ul>
            <li>Two in two</li>
           </ul>
        </div>
      </div>
    
    </body></html>

    using this simple example, the last three follow the same: disregarding levels (direct descendants or not), the targets are: ul's inside elements inside ul's inside elements inside li's inside elements inside #nav.

    so, (starting with the first), the big box #nav got to have, (going back to the last), an ul inside an ul inside a li, no matter what additional wrapping is between them.


    going back to the example, if i was to target the second ul, the descendant selector would be using the div element too:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language"	content="en">
    
      <style>
      
        #nav ul {
          background-color:blue;
          }
          
        #nav div ul {
          background-color:red;
          }
    
      </style>
    
      
    
    </head><body>
    
      <div id="nav">
        <ul>
          <li>One in one</li>
        </ul>
        
        <div>
          <ul>
            <li>Two in two</li>
           </ul>
        </div>
      </div>
    
    </body></html>
    because there is only one ul in a div inside #nav. so you put elements in the descendant selector like you choose stepping stones

  3. #3
    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)
    Quote Originally Posted by Juc1 View Post
    1. #nav li ul ul
    2. #nav li ul li
    3. #nav li ul li li
    In each case below, the green bit is what the CSS declaration would apply to. The purple bits are elements needed to make well-formed HTML, but are not referenced in the styling.

    1.
    Code:
    <div id="nav">
    <ul><li>
        <ul><li>
            <ul>...</ul>
    </li></ul></li></ul></div>
    2.
    Code:
    <div id="nav">
    <ul><li>
        <ul><li>...</li>
    </ul></li></ul></div>
    3.
    Code:
    <div id="nav">
    <ul><li>
        <ul><li>
            <ul><li>...</li>
    </ul></li></ul></li></ul></div>
    Remember that this are descendent selectors rather than child selectors, so you can include any extra elements you want within the structure - eg, you could have a list inside a table cell inside a table row inside a table inside a div inside a list item - you can add 'purple' tags until the cows come home, and the CSS will still apply.


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
  •