Home/ Questions/Q 5995105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:54:46+00:00

I understand the difference between child and descendants just fine. I am having an

  • 0

I understand the difference between child and descendants just fine. I am having an issue with the child selector however. Perhaps I am not understanding something correctly. Take the following HTML as an example. This is a 3 tier navigation menu.

<div id="nav">
    <ul class="menu">
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a>
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 3</a></li>
    </ul>
</div>

Based on my understanding of the child ( > ) selector in css, the following would be true:

#nav {}
#nav ul.menu {}
#nav ul.menu > li {} /* main navigation items only */
#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */
#nav ul.menu > li > ul.sub-menu ul.sub-menu {} /* the 3rd tier only */

This does not seem to be the case however. The css for the 2nd tier is being applied to the 3rd tier as well. And only with an !important declaration am I able to overwrite the 2nd tier within the last css definition.

Make sense?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    nav ul.menu > li {} /* main navigation items only */

    correct

    #nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */

    wrong – You are selecting the ul.menu child li which has child ul.sub-menu, all the li elements under it.

    If you want to restrict it to that level only, use this:

    #nav ul.menu > li > ul.sub-menu > li {}

    The last one 

    #nav ul.menu > li > ul.sub-menu ul.sub-menu {}

    should work fine as long as you keep it in 3 tiers only.

    • 0