Why isn't my active class on the link getting applied?-CodePudding

I want to display a navigation bar and highlight the active page by using the active class.

  <body>  <header >
                <nav >
                    <ul>
                        <li><a  href="index.html">home</a></li>
                        <li><a href="contact.html">contact</a></li>
                    </ul>
                </nav>
            </header>
        </body>

With this style, I'm able to see the change in color when the link is hovered on, but not when it's active.

body {
    background-color: black;
    font-family: Lato, Helvetica, sans-serif;
    color: white;
     }
 li a {
    display: block;
    color: white;
    margin: 14px 16px;
    padding: 2px;
    text-decoration: none;
    letter-spacing: 0.235px;
    /* margin-right: 12px; */
}

li a:hover {
    color: #EE6C4D;
    /* font-weight: bold;
    letter-spacing: 0; */
}

li a:active{
    color: #EE6C4D;
}

CodePudding user response：

because you do not really have a class in your css called .active

a:active is NOT the same as class: active

add to your CSS:

.active{
    color: #EE6C4D;
}

CodePudding user response：

You need to use a.active instead of a:active,because active is a class not an atribute in your code.

Also,in order to get the expected result,you had better to use different color for test.

body {
    background-color: black;
    font-family: Lato, Helvetica, sans-serif;
    color: white;
     }
 li a {
    display: block;
    color: white;
    margin: 14px 16px;
    padding: 2px;
    text-decoration: none;
    letter-spacing: 0.235px;
    /* margin-right: 12px; */
}

li a:hover {
    color: #EE6C4D !important;
    /* font-weight: bold;
    letter-spacing: 0; */
}

li a.active{
   color: #0088CC;
}

<body>  <header >
                <nav >
                    <ul>
                        <li><a  href="index.html">home</a></li>
                        <li><a href="contact.html">contact</a></li>
                    </ul>
                </nav>
            </header>
        </body>