Slab Slab - 1 year ago 56
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 Source

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">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download