How do I use pseudo class css to list item?

I wanted to color the “Home” button from the navigation list to make it blue.
I’ve used the code below but it doesn’t work. I don’t know why? Could anyone please help me out?

**HTML part:**
<header>
<nav>
<div class=”logo”>
<h2><a href=”http://”>Bangladesh</a></h2>
</div>
<div class=”menu”>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>Gallery</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>
</nav>
</header>

**CSS Part:**
nav {
display: flex;
justify-content: space-between;
}

.menu ul {
display: flex;
}

.menu ul li {
list-style: none;
padding: 15px 25px;
}

.menu ul li a {
text-decoration: none;
color: green;
font-size: 18px;
}

.menu ul li:first-child {
color: blue;
}