add border-radius to only the first and last li elements in nav

[Claire-Crawford]

I've added border radius to the nav but need to figure out how to make links conform to the same radius when hovered. ..

[comaldave]

@CherylCrawford

The box-shadow in nav#left ul :hover is not the same as nav#left ul

nav#left ul :hover {
  border-top-right-radius: 20px;
  over-flow: hidden;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
   background: rgba(255, 255, 255, 0.1);
   color: rgba(0, 0, 0, 0.7);
 }

You may wish to define common characteristics as follows:

nav#left ul, nav#left ul :hover {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

Then when you change it for one, you change it for both.

[Claire-Crawford]

Thanks but that doesn't help. I need border radius on top-right and top-left, bottom-right and bottom-left of li elements only ... so first and last child only. Tried multiple ways but not working. Still researching for solution.

[comaldave]

@CherylCrawford

https://www.w3schools.com/css/css_pseudo_elements.asp

You need a pseudo class

#left li::first-of-type > a {}

#left li::last-of-type > a {}

[Claire-Crawford]

Wasn't able to make that work. The issue is that I have the border radius set except for when you hover. It has to effect only the hover aspect of the nav. This is where the challenge is.

[comaldave]

Sorry, a pseudo class is only one colon, the pseudo element is two colons. And I had you styling the link, not the li.

#left li:first-of-type {}

#left li:last-of-type {}

#left li:first-of-type:hover {}

#left li::last-of-type:hover {}