Question

Here’s my HTML markup:

<ul class="nav">
    <li><a href='#'>Nav1</a>
        <ul>
            <li><a href='#'>Sub1</a></li>
            <li><a href='#'>Sub2</a></li>
        </ul>
    </li>
    <li><a href='#'>Nav2</a>
    </li>
    <li><a href='#'>Nav3</a></li>
    <li><a href='h#'>Nav4</a></li>
</ul>

I only want to target the anchor tag with text Nav1. Here’s the CSS I am using that isn’t working. It is selecting both Nav1 and Sub1.

.nav li:first-child > a {

}

Should I just use a class or is there a way to do it without one?

Answer 1

get just the very next li only using another child selector > between .nav and li:first-child

.nav > li:first-child > a {

}