active link css styling

[andrederbeiler]

Hey, i have got some custom html and css code on my website to make a custom menu. I would like to style the active style of the links properly but it does not seem to work with :active{}.
is there a chance to get this running with pure css and html?

this is the line that does not seem to do anything (it is at the end of my custom css):
.nav-link a:active{
color: hsla(0, 0%, 100%, 1);
}

this is my website and below that you will find my custom code:
https://andrebeiler.work (the menu is custom made)

Custom HTML at top:
<div class="top">
<a href="/" class="link-3">André Beiler</a>
<div class="nav-2">
<a href="/foto" class="nav-link">Fotographie</a><span class="komma">, </span>
<a href="/film" class="nav-link">Musikvideo</a><span class="komma">, </span>
<a href="#" class="nav-link">Archiv</a><span class="komma">, </span>
<a href="/snaps" class="nav-link">Snaps</a><span class="komma">, </span>
<a href="/about" class="nav-link">Über Mich</a><span class="komma">, </span>
<a href="/about" class="nav-link">Kontakt</a>
</div>
</div>

Custom CSS:.top {
font-family: 'NeueHaasDisplayRoman', sans-serif;
position: fixed;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
padding-top: 20px;
padding-bottom: 0px;
padding-left: 20px;
z-index: 999999999;

}

.link-3 {
text-decoration: none;
font-size: 1em; /* Set the font size to 1em /
line-height: 0.95;
color: hsla(0, 0%, 100%, 0.6);
transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); / Use "in out circ" timing function for color */
}

.link-3:hover {
color: hsla(0, 0%, 100%, 1);
}

.nav-2 {
display: flex;
margin-top: 2px;
}

.nav-link,
.komma {
font-size: 1.3em; /* Set the font size to 1.3em /
line-height: 0.95;
text-decoration: none;
color: hsla(0, 0%, 100%, 0.6);
transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); / Use "in out circ" timing function for color */
}

.nav-link:hover {
color: hsla(0, 0%, 100%, 1);
}

.komma {
margin-right: 4px; /* Adjust the margin as needed */
}

.lay-projectindex-row.hover{
font-family: 'NeueHaasDisplayRoman', sans-serif;
}

.nav-link a:active{
color: hsla(0, 0%, 100%, 1);
}

[arminunruh]

the css selector :active is only applied while clicking on a link during mousepress

meaning when you release your finger from your mouse, its not styled in that way anymore

so :active has nothing to do with the current page's active menu point

read this please:
https://laytheme.com/documentation/custom-css-styling.html#css-based-on-current-page

some body html classes change, depending on what page you are on
you can use this to style your links differently (active style) depending on what page you are on