Home/ Questions/Q 6169393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:51:02+00:00

I’m experimenting here with Pseudo-classes and trying to something I would usually do with

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0