Slab Slab - 1 month ago 4
CSS Question

How can I remove my ul li first child without removing all the ul ul li first children?

I have a two level deep ul system for my wordpress website menu.

I want to remove the "home" menu item which is the first li in the top level ul.

If I do the following:

.menu-header ul li:first-child{
display: none;
}


Then it removes the first li in the top level ul, but also the first li in all of the second level menus.

So I tried this:

.menu-header ul > li:first-child{
display: none;
}


but it has no effect? I thought this was what the > child selector was for?

I only get what I want if I add the following line:

.menu-header ul ul li:first-child{
display: block;
}


which brings back all the first li from the second level ul.

BUT - surely there is a way I can do this in one line without resorting to this last bit of extra code?

Answer

You were on the right track but you want to use the > child selector for the child ul element like so:

.menu-header > ul > li:first-child {
  display: none;
}
<div class="menu-header">
  <ul>
    <li>Home</li>
    <li>Page
      <ul>
        <li>Test</li>
      </ul>
    </li>
  </ul>
</div>

Comments