Reputation: 161
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 ?
Upvotes: 0
Views: 35
Reputation: 48
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;
}
Upvotes: 0
Reputation: 156
Try to add also a more specific setting:
a.current-menu-parent:visited, a.current-menu-item:visited {
color: var(--green);
}
Upvotes: 1