Search code examples
cssstylesheet

Style only one anchor link with class applied to li

Struggling with this one but I'm sure it's quite easy!

WordPress is applying a class "current_page_item" to the <li> that surrounds my anchor link in my side menu. I want to bold the current page item only.

I have some sub menus being nested like so:

<ul class="menu">
    <li class="current_page_item">
        <a>Please bold</a>
        <ul class="sub-menu">
            <li><a>Pleas DO NOT bold</a></li>
            <li><a>Pleas DO NOT bold</a></li>
            <li><a>Pleas DO NOT bold</a></li>
        </ul>
    </li>
</ul>

I just cannot get the 1 link to bold, it bolds every sub link as well.

ul.menu li.current_page_item:first-child {font-weight:bold}

What CSS do I need? If the class was on the anchor link itself this would be simple but I can't get my head round how to do it.

Solution

  • You can do it this way:

    ul.menu li.current_page_item > a:first-child {font-weight:bold}

    This will bold the a tag directly under ul.menu li.current_page_item, no matter how many direct a tags you have under it.

    Working Code Snippet:

    ul.menu li.current_page_item > a:first-child {font-weight:bold}
    <ul class="menu">
    <li class="current_page_item">
        <a>Please bold</a>
        <ul class="sub-menu">
            <li><a>Pleas DO NOT bold</a>
            <li><a>Pleas DO NOT bold</a>
            <li><a>Pleas DO NOT bold</a>
        </ul>
    </li>
</ul>