0

.nav-list :first-child :first-child{
    font-weight:bold;
}

<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>
<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>

I have the nav menu below where I'm trying to target the following css:

.nav-list:first-child:first-child{
    font-weight:bold;
}

I was hoping to turn 'Home' bold but nothing happens

<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>
DCR
  • 14,737
  • 12
  • 52
  • 115

2 Answers2

0

https://jsfiddle.net/cmxna7vg/

.nav-list > li:first-child{
    font-weight:bold;
}

You need to specify that you want to search elements only at the first level of nesting by ">", and then specify that that element must be first child.

Xth
  • 710
  • 1
  • 5
  • 11
0

Here you go-

.nav-list > li:first-child > a:first-child{
    font-weight:bold;
}

You specify the :first-child to the child element, and not the parent. Also, > selector selects the direct child(ren).

Nachiket Bhosale
  • 106
  • 3