CSS Selector question

axer

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.

Goodshape

If I understand you right, you have to give them specific id or class in some cases.

For instance,

axer wrote: »

1. If I want to style only the first UL do I select it using?

#leftcol ul#mainlevel

This will style only the ul that is within #leftcol and has the ID #mainlevel but no matter how nested that UL is.

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

#leftcol ul#mainlevel ul

?

This will style all ULs that are within #leftcol and within ul#mainlevel. Whether it's the first nested, second, third, whatever. I.e. it will also style ul#mainlevel ul ul, and ul#mainlevel ul ul ul, etc.

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

#leftcol ul#mainlevel ul ul

?

Yes, and all ULs below the third.

If you want to be more specific, i.e. style only the second, give the second UL an ID (if it's the only one) or Class (if you want to use it for more than one).

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

This will style all A elements with class=sublevel that are anywhere below li.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

Eh... not sure about that one. I assume the A tag has a class 'sublevel' and ID 'active_menu'? I think change a.sublevel#active_menu to a#active_menu. The sublevel bit isn't relevant if you are styling a specific ID.

(in fact.. if you're styling a specific ID then I don't think any of the rest of it is relevant either. ID overrules any previous CLASS style applied to the element, so simply writing a#active_menu { blah } on it's own should do the trick).

axer

Thanks Goodshape. You solved my problem.

I was (stupidly) using a class and id together to select an element when you are correctly pointing out that I only need use the ID. With the selector as "a.class#ID" Firefox and IE7 were rendering correctly but IE6 was not recognising the selector at all.

EKRIUQ

wrong thread