How to add active css class to menu item? - html

Question

https://www.bootply.com/XzK3zrPhJJ
In this example, why is the Home button not marked red?
.navbar a:hover,
.navbar a:focus,
.navbar a:active {
color: red !important;
}
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
Home
Links
About
</div>
</div>
</nav>

Answer 1

You shoud use not a:active but a.active
:after is a pseudo class. But you want to select a tags which also has .active class.
.navbar a:hover,
.navbar a:focus,
.navbar a.active {
color: red !important;
}
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
Home
Links
About
</div>
</div>
</nav>

Answer 2

Use the css Class selectors
The CSS class selector matches elements based on the contents of their
class attribute.
.navbar a.active {
color: red;
}
<nav class="navbar navbar-expand-lg">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
Home
Links
About
</div>
</div>
</nav>
keep in mind that The :hover CSS pseudo-class
The :hover CSS pseudo-class matches when the user interacts with an
element with a pointing device, but does not necessarily activate it.
It is generally triggered when the user hovers over an element with
the cursor (mouse pointer).
and avoid !important you can read more about !important_exception here

Answer 3

Why is it not active, but with active CLASS
instead of a:active use .active to reference, in this case you can also read more about the selector HERE

Answer 4

I think, it should be like this:
navbar a:hover {
color:red;
font-weight:bolder;
text-decoration:underline;
}