Pedro Pedro - 4 years ago 156
CSS Question

How to make hover use border-radius first-child

Im working on a small website and I have a menu with the border-radius set to 10px. I having problem on how to make the hover use the border-radius only on the first and last child.
Can somebody explain me what am i doing wrong?

<div class="menu">
<li><a href="#">Link 1 </a></li>
<li><a href="#">Link 2 </a></li>
<li><a href="#">Link 3 </a></li>
<li><a href="#">Link 4 </a></li>
<li><a href="#">Link 5 </a></li>


.menu ul
background: #ede0b3;
width: 200px;
box-shadow: 1px 1px 1px 1px grey;
border-radius: 10px;
margin-left: 5px;

.menu ul li
list-style: none;
border-bottom: 1px solid grey;

.menu ul li a
padding: 10px 15px;
display: block;
color: black;
font-weight: bold;
text-decoration: none;

.menu ul li:last-child
border-bottom: none;


.menu ul li a:hover
background: white;

.menu li a:first-child:hover
border-radius: 10px;


Answer Source

Here, is the updated fiddle.

You were correct, just you missed that a is always the first child of li. You were to target anchor of first li.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download