Menu selectors (newbie)

HTML & CSS
1

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.:shifty:

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

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.

<div id="nav">
[COLOR="Purple"]<ul>[/COLOR]<li>
    <ul>[COLOR="#800080"]<li>[/COLOR]
        [COLOR="SeaGreen"][B]<ul>...</ul>[/B][/COLOR]
</li></ul></li></ul></div>

<div id="nav">
[COLOR="#800080"]<ul>[/COLOR]<li>
    <ul>[COLOR="#2e8b57"][B]<li>...</li>[/B][/COLOR]
</ul></li></ul></div>

<div id="nav">
[COLOR="Purple"]<ul>[/COLOR]<li>
    <ul><li>
        [COLOR="#800080"]<ul>[/COLOR][COLOR="SeaGreen"][B]<li>...</li>[/B][/COLOR]
</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.

3

what you don’t “read” there is the css descendant selector. it’s a little like matroska dolls :slight_smile:

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

<!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:

<!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 :slight_smile: