1

I'm experimenting here with Pseudo-classes and trying to something I would usually do with a style class. I have a unordered list with multiple sub unordered lists and so on.

I want to only make sure the first level of li tags are been set to float left. Here is my html

<body>
<div id="MainMenu">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About</a>
            <ul>
                <li><a href="#">The Product</a></li>
                <li><a href="#">Meet The Team</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul>
                <li>
                    <a href="#">Business Hours</a>
                    <ul>
                        <li><a href="#">Week Days</a></li>
                        <li><a href="#">Weekends</a></li>
                    </ul>
                </li>
                <li><a href="#">Directions</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>

I tried a style like this.

body {
    font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
    margin:0;
    padding:0
}

#nav{
    list-style:none;
    font-weight:bold;
    width:100%;

}

#nav li{
    float:left;
    margin-right:40px;
    position:relative;
}

The issue with this is, its saying all li descendants of id nav get set to float left. Now I only want the first level li tags to float to left and all the other level li tags to be ignored. Please don't answer by saying use a class name for all the top level li tags. I already am aware I could approach it like this. What I'm after is to learn some of the Pseudo-classes and how they may help me in this approach.

For example I need something that is like #nav li:first-child{ .... } But this is only going to give me the first li in the top ul list. I want all the top level children of the ul list and ignore the second level li tags and so on. Is there a Pseudo-classes that can accomplish this.

Thanks

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Chapsterj
  • 6,483
  • 20
  • 70
  • 124

3 Answers3

3

you can use #nav > li this matches all elements that are the immediate li children of #nav.

More info here and here.

A demo: http://jsfiddle.net/9M6p2/

Sotiris
  • 38,986
  • 11
  • 53
  • 85
  • 1
    Ah perfect this is exactly what I'm after. So if I wanted to get to the next level I would do something like this. ul > li > li – Chapsterj Jul 16 '11 at 22:16
  • Ah it worked for the first level with ul > li but when I tried ul > li > li for the second level it stopped all of the floating from working? – Chapsterj Jul 16 '11 at 22:20
  • @Chapsterj yes, check this demo http://jsfiddle.net/9M6p2/ Keep in mind that a `ul` mediates so the selector must be `ul > li > ul > li` – Sotiris Jul 16 '11 at 22:21
  • Ah Sotiris so you have to add the ul that its inside in order to get to the next level li. so its #nav > li > ul > li. This looks like its saying all of the elements up to the second level should be selected but its not. I'll have a look up to see what the > selector means. Thanks – Chapsterj Jul 16 '11 at 22:27
  • @Chapsterj the links in my post give more information and examples – Sotiris Jul 16 '11 at 22:28
  • I just saw them after I wrote the comment. Thanks again. And thanks to everyone for all the great answers. – Chapsterj Jul 16 '11 at 22:47
  • @Chapsterj: I illustrate the `>` selector [here](http://stackoverflow.com/questions/3225891/what-does-means-in-css-rules/3225905#3225905). – BoltClock Jul 17 '11 at 11:55
1

A good approach would be:

#nav li { float: left; }
#nav li li { float: none; }
g_thom
  • 2,810
  • 2
  • 18
  • 18
0

You could use #nav li like you already do and #nav li ul or #nav li ul li to style the second level LI-Elements.

Jay
  • 2,141
  • 6
  • 26
  • 37
  • 1
    #nav li ul styles everything after the first level. Not what I was after I was only looking for the first level. – Chapsterj Jul 16 '11 at 22:29