Need to fix the Navigation CSS issue?

Question

I want to show bold current menu item only, but if I am trying to bold current menu item, the sub menu items are also getting bold.

my CSS is:

.main .current-item{
    font-weight:900;
}

I want to get bold only current menu item which is Second and class is current-item

<ul class="main">
    <li><a href="#">First</a></li>
    <li class="current-item">
        <a href="#">Second</a>
        <ul class="sub-menu">
            <li><a href="#">Inner First</a></li>
            <li><a href="#">Inner Second</a></li>
        </ul>
    </li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
</ul>

Answer 1

Almost right, you'll have to address the actual <a> inside the <li class="current-item"> to style it.

.main .current-item > a {
    font-weight: 900;
}

Answer 2

You can apply it to the immediate child anchor only:

.main .current-item > a {
    font-weight:900;
}

More information about the direct descendant selector