CSS Selector question

[noelmul]

Hi guys,

I just need to verify something with regards css element selection.

Take this html for a menu - an unordered list:

<div id="leftcol">[b]
 <ul id="mainlevel">[/b] 
  <li class="mainlevel">  
   <a href="http://www.test.com/index.php" class="mainlevel">Home</a></li> 
  <li class="mainlevel_active">  
   <a href="http://www.test.com/news.html" class="mainlevel">News</a> [b]
   <ul>[/b] 
    <li class="sublevel">  
     <a href="http://www.test.com/news1.html" class="sublevel">News Category 1</a></li> 
    <li class="sublevel_active">  
     <a href="http://www.test.com/news2.html" class="sublevel">News Category 2</a>[b] 
     <ul>[/b] [b]
      <li class="sublevel">  
       <a href="http://www.test.com/news2_subcat1.html" class="sublevel">News Sub-Category 1</a></li>[/b] 
      <li class="sublevel_current"> [b]
       <a href="http://www.test.com/news2_subcat2.html" class="sublevel" id="active_menu">News Sub-Category 2</a>[/b]</li> 
      <li class="sublevel">  
       <a href="http://www.test.com/news2_subcat3.html" class="sublevel">News Sub-Category 3</a></li> 
     </ul></li> 
    <li class="sublevel">  
     <a href="http://www.test.com/news3.html" class="sublevel">News Category 3</a></li> 
    <li class="sublevel">  
     <a href="http://www.test.com/news4.html" class="sublevel">News Category 4</a></li> 
   </ul></li> 
  <li class="mainlevel">  
   <a href="http://www.test.com/blog/" class="mainlevel">Blog</a></li> 
  <li class="mainlevel">  
   <a href="http://www.test.com/links.html" class="mainlevel">Links</a></li>
 </ul>
</div>

It basically has a UL ID tag of "mainlevel" for the 1 level of the menu all inside a DIV with an ID of "leftcol".
Then there is a child UL element inside the "mainlevel" UL for the submenu (2nd level menu) and another inside that again for a submenu of the submenu (3rd level menu).

I am unsure as to how to code to select the 2nd and third level UL's for styling.

Just a few questions:
1. If I want to style only the first UL do I select it using?

#leftcol ul#mainlevel

2. If I want to style only the second UL do I select it using?

#leftcol ul#mainlevel ul

?
3. If I want to style only the third UL do I select it using?

#leftcol ul#mainlevel ul ul

?

4. If I wanted to style the A elements in the 2nd level menu do I do this?

#leftcol ul#mainlevel ul li.sublevel a.sublevel

5. If I wanted to style only the A element of the News Sub-Category 2 link (which is the second item on the third level of the menu) would I do this?

#leftcol ul#mainlevel ul ul li.sublevel_current a.sublevel#active_menu

I basically want to know how to exactly target specific child elements.

Thanks for your time.
Noel.

[le_gber]

Hi noelmul and Welcome to WebmasterWorld [webmasterworld.com]

Assuming that you only have one ul in the div I would remove al the id's and classes and only have:

<div id="leftcol">
<ul>
<li><a href="http://www.test.com/index.php" class="mainlevel">Home</a></li>
<li><a href="http://www.test.com/news.html" class="mainlevel">News</a>
<ul>
<li><a href="http://www.test.com/news1.html" class="sublevel">News Category 1</a></li>
<li><a href="http://www.test.com/news2.html" class="sublevel">News Category 2</a>
<ul>
<li><a href="http://www.test.com/news2_subcat1.html" class="sublevel">News Sub-Category 1</a></li>
<li><a href="http://www.test.com/news2_subcat2.html" class="sublevel" id="active_menu">News Sub-Category 2</a></li>
<li><a href="http://www.test.com/news2_subcat3.html" class="sublevel">News Sub-Category 3</a></li>
</ul></li>
<li><a href="http://www.test.com/news3.html" class="sublevel">News Category 3</a></li>
<li><a href="http://www.test.com/news4.html" class="sublevel">News Category 4</a></li>
</ul></li>
<li><a href="http://www.test.com/blog/" class="mainlevel">Blog</a></li>
<li><a href="http://www.test.com/links.html" class="mainlevel">Links</a></li>
</ul>
</div>

To apply styling to the topmost level you can then do:
#leftcol ul or #leftcol li

For second level:
#leftcol ul ul or leftcol li li

You get the idea.

To select links on the third level only:
#leftcol li li li a

Additionally, if you set a style for #left col li, you may need to unset it in #leftcol li li and #leftcol li li li.

If you want to show a selected state for the link (your currents) just have a class called current and define it using:
#leftcol li.current
#leftcol li li.current
#leftcol li li li.current

You can use a:hover, a:focus and a:active, link state to enhance navigation accessibility when someone uses their keyboard. Finally, I would use the tabindex="-1" on all second and third level links if the navigation remains hidden on tabbing.

Hope this helps

[edited by: SuzyUK at 8:08 am (utc) on Feb. 29, 2008]
[edit reason] fixed link [/edit]