CSS how to use :first-child and :last-child


<style type="text/css">
.menu ul li:first-child a {
  color: red;
  font-weight: bold;
}
.menu ul li:last-child a {
  color: green;
  font-weight: bold;
}
</style>

<div class="menu">
  <ul>
    <li><a href="#">apple should be red</a></li>
    <li><a href="#">baker</a></li>
    <li><a href="#">charlie</a></li>
    <li><a href="#">grass should be green</a></li>
  </ul>
</div>
1