Hide first <li> element

css, css-selectors

Solution

Max compatibility:

.main-nav li {
    display: none;
}
.main-nav li + li {
    display: list-item;
}

Less compatibility, but not too bad:

.main-nav ul li:first-child {
    display: none;
}

Problem

My HTML structure is as per the following: ``` <nav class="main-nav"> <ul> <li class="gallery-collection"> <a href="/">Welcome</a> <!-- Hide this --> </li> <li class="page-collection"> <a href="/about/">About</a> </li> <li class="gallery-collection"> <a href="/support/">Support</a> </li> ... ``` How do I hide the first element saying "Welcome" using CSS? Note that 2 elements have the same class here: 'gallery-collection'.

Original source