title: Last-child style over-rides first-child style when only one child is available
body: <p><img src="https://i.stack.imgur.com/WV9mx.jpg" alt="enter image description here"></p>
  
  <pre><code>ul li:first-child a {
     border-radius: 5px 5px 0 0;
  }
  
  ul li:last-child a {
     border-radius: 0 0 5px 5px;
  }
  </code></pre>
  
  <p>When there's just once child, the last-child style over-rides the first-child style. Is there a way to apply both (since it is both the first and last child)</p>
  
  <p>Am looking to achieve this with just CSS, without the aid of JS. Thanks.</p>