Hovering over link not working correctly for first child

user_15811177 0
Viewed 36

So, I want to make just the first element of a nav-bar to change it's background colour when I hover over it, but both the "Home" and "News" button change colour even though i wrote a:first-child:hover. Please help.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, nav, ul, li, a, span{
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            }

            .nav, header{
                display: block;
            }

            ol, ul{
                list-style: none;
            }

            a{
                text-decoration: none;
            }

            #header h1 {
                left: 1.25em;
                margin: 0;
                position: absolute;
            }

            #header {
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;    
                z-index: 100;

            }

            #header a, #header a:visited{
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            }

            #header nav{
                position: absolute;
                right: 1em;
                top: 0;
            }
                #header nav ul li{
                    display: inline-block;
                    margin-left: 1em;
                } 
                    #header nav ul li a:first-child:hover{
                        background-color: red;
                    }

        </style>
        
    </head>

    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>
hover css-selectors css html
3 Answers

The :first-child should be given to the li, not to the a.

Because, there are only single childs of a inside each li, but there are more than one li inside the ul. So the :first-child should be given to the li, and hover to the a

  #header h1 {
      left: 1.25em;
      margin: 0;
      position: absolute;
  }

  #header {
      background: rgba(39, 40, 51, 0.965);
      box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

      width: 100%;
      height: 3.5em;

      left: 0;
      top: 0;

      line-height: 3.5em;
      position: fixed;    
      z-index: 100;

  }

  #header a, #header a:visited{
      color: rgba(224, 224, 224, 0.986);

      -o-transition: 0.5s;
      -ms-transition: 0.5s;
      -moz-transition: 0.5s;
      -webkit-transition: 0.5s;
      transition: 0.5s;

      font-size: 125%;
  }

  #header nav{
      position: absolute;
      right: 1em;
      top: 0;
  }
  #header nav ul li{
      display: inline-block;
      margin-left: 1em;
  } 
  #header nav ul li:first-child a:hover{
      background-color: red;
  }
<header id="header">
    <h1 id="logo"><a href="#">Random</a></h1>
    <nav id="nav">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="#2">News</a></li>
        </ul>
    </nav>
</header>

user_33153330

Hover on li not on a element . Try Following

<html>
    <head>
        <style>
            html, nav, ul, li, a, span{
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            }

            .nav, header{
                display: block;
            }

            ol, ul{
                list-style: none;
            }

            a{
                text-decoration: none;
            }

            #header h1 {
                left: 1.25em;
                margin: 0;
                position: absolute;
            }

            #header {
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;    
                z-index: 100;

            }

            #header a, #header a:visited{
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            }

            #header nav{
                position: absolute;
                right: 1em;
                top: 0;
            }
                #header nav ul li{
                    display: inline-block;
                    margin-left: 1em;
                } 
                    #header nav ul li:first-child:hover a {
    background-color: red;
}

        </style>
        
    </head>

    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>
user_62242280

The problem is that 'a' is the first child to both 'li' elements which means you have to use :first-child on the 'li' then use the :hover on the 'a' element.

            html, nav, ul, li, a, span{
                font-family: regular;
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                vertical-align: baseline;
            }

            .nav, header{
                display: block;
            }

            ol, ul{
                list-style: none;
            }

            a{
                text-decoration: none;
                padding: 2px;
                border-radius: 2px;
            }

            #header h1 {
                left: 1.25em;
                margin: 0;
                position: absolute;
            }

            #header {
                background: rgba(39, 40, 51, 0.965);
                box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);

                width: 100%;
                height: 3.5em;

                left: 0;
                top: 0;

                line-height: 3.5em;
                position: fixed;
                z-index: 100;

            }

            #header a, #header a:visited{
                color: rgba(224, 224, 224, 0.986);

                -o-transition: 0.5s;
                -ms-transition: 0.5s;
                -moz-transition: 0.5s;
                -webkit-transition: 0.5s;
                transition: 0.5s;

                font-size: 125%;
            }

            #header nav{
                position: absolute;
                right: 1em;
                top: 0;
            }
                #header nav ul li{
                    display: inline-block;
                    margin-left: 1em;
                }
                    #header nav ul li:first-child a:hover {
                        background-color: red;
                    }
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header id="header">
            <h1 id="logo"><a href="#">Random</a></h1>
            <nav id="nav">
                <ul>
                <li><a href="#1">Home</a></li>
                <li><a href="#2">News</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

user_157551100
Related