How to deal with the overwrite of visited anchors
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 ?
Try to add also a more specific setting:
a.current-menu-parent:visited, a.current-menu-item:visited { color: var(--green); } 
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; } 
