How to deal with the overwrite of visited anchors

Question

I'm trying to apply a specific color (green) on my sub-menu items when user is on the page of this specific item.

The problem is :

-All my menu items needs to be set to base color (ocher)

.header_menu {
text-decoration: none;
color: var(--lightocher);}

-So all anchors are set to same color for keeping them ocher even if visited.

.header_menu a:visited {
color: var(--lightocher);}

-So my green can't pass because he is overwritted by :visited color

.current_page_item, .current-menu-item, .current-menu-parent {
color: var(--green);}

How can I deal with this ?

Answer 1

Try to add also a more specific setting:

a.current-menu-parent:visited, a.current-menu-item:visited {
color: var(--green);
}

Answer 2

You could also add !important to the rule even though its not very good to add it in specificity context.

    current-menu-parent:visited, current-menu-item:visited {
         color: var(--green) !important;
    }