How to apply active class for active link

[newcoder1010]

Hello,

HTML:

<div class="areas-box-list">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../denver-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Denver County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../arapahoe-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Arapahoe County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../douglas-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Douglas County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../jefferson-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Jefferson County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../adams-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Adams County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../broomfield-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Broomfield County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../boulder-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Boulder County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../gilpin-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Gilpin County </span> </a></div>
</div>

 

CSS:

.area-loc a:hover{
  background:#04437a; 
}

.area-loc a:active { color:white; background:#083a9a;;}

 

Hover works just fine. Active does not work. I noticed that I do not have active class in html. I am not sure how to add the active class in html. Please advise!

 

[dsonesuk]

:active has never worked as expected, less so when it was said it was a security risk in that it could be used to track where you have been.

You would have to look at current url in browser address bar, strip it down to last text after the last slash and then match it to the url in href, if identical add class 'active'.

This can be done either by server script such as PHP, or client script javascript/jquery.

[Ingolme]

I'm not sure what you are referring to. The :active pseudo-class has always worked as designed. It applies a style to an object when the object is being interacted with, either by being clicked or having focus and the user pressing Enter.

You might be thinking of the :visited pseudo-class. Javascript does not have access to computed styles of visited links because that would allow anybody to track where you have been.

[dsonesuk]

No! because visited works! With :active , people expect it to highlight and remain highlighted to current page, not when you just hold the mouse button down for a short time, that is why a class of .active is added, to highlight link/menu to current page.

[newcoder1010]

Thanks for your messages. I am not sure how to edit the html so active class will display in the source code depending on what I am on. If the active class is not visible in the source code, I guess my css wont work. Thanks!

[Ingolme]

No, the :active pseudo-class was never intended to do that. It is a mere coincidence that people ended up using the CSS ".active" class to represent a link that points to the current page.

From the original CSS 1 specification: https://www.w3.org/TR/CSS1/#anchor-pseudo-classes

Quote

An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.

 

[dsonesuk]

Yes! I know that! But! That is what anyone new to these pseudo classes, expect it to do, hence

5 hours ago, dsonesuk said:

:active has never worked as expected,

Hence

Quote

people expect it to highlight and remain highlighted to current page

It's not the easiest pseudo class to see or a activate, the chances are that if it exists, it's more than likely never noticed by the majority.

Edited March 16, 2020 by dsonesuk

[dsonesuk]

IF the menu is manually added to each page, you just add active class to the element you want to highlight , else you have to use server language or javascript.