I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :first-child element? Thank you.
Here is the code snippet:
HTML:
<ul id="navHead">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
CSS:
#navHead{
border-radius: 5px;
background: #454545 url('images/gradient.png') top left repeat-x;
}
#navHead li{
float: left;
}
#navHead li a{
display: block;
}
After clicking on an item, Wordpress adds a new class - current-menu-item, which is applied to the current list item. Because navHead has rounded corners, clicking on the first item causes the left side of navHead to lose its rounded shape. To address this issue, I tried using the following code:
#navHead li:first-child .current-menu-item a{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
However, nothing seems to happen. I need to find a way to combine the styles for .current-menu-item and li:first-child in CSS only, as the HTML code is managed by Wordpress.