Pedro Pedro - 4 months ago 19
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">
<ul>
<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>
</ul>
</div>


CSS:

.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;
}


Demo: https://jsfiddle.net/vaydrvcr/

Answer

Here, is the updated fiddle. https://jsfiddle.net/vaydrvcr/1/

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

Comments