CSS :hover on a specific list item

Cristyantm97 0
Viewed 16

I am trying to build a webpage and I want to hover over a specific element of a list.

  <nav>
      <ul class="navbar">
        <li>
          <div></div>
          <div>MENU</div>
        </li>
        <li><a href="">Loop</a></li>
        <li><a href="">awwwards.</a></li>
        <li><a href="">REGISTER/LOG IN</a></li>
        <li><a href="">SUBMIT YOUR SITE!</a></li>
      </ul>
    </nav>

Why can't I use hover like this to hover over the last li?

 .navbar li:last-child{
 background-color: black;
 }
 .navbar li:last-child:hover{
  background-color: red;
 }

I can use this to select the last li but I can't use it for hover. Also I tried giving the last li an id but it still does not work. Could you help me? Thanks!

hover css html
1 Answers

I think it should work

ul li:last-child:hover {
  background: red;
}
<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hover</li>
</ul>

IT goldman0
Related