Tips for managing the replacement of previously visited links

Question

I am facing a challenge in applying a specific color (green) to my sub-menu items when the user is on the page of that particular item.

The issue at hand is:

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

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

-Therefore, all anchors are designated the same color to ensure they remain ocher even after being visited.

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

-Due to this setup, the green color I want to use gets overridden by the :visited color

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

What would be the best approach to resolve this issue?

Answer 1

Answer №1

Consider including a more targeted property as well:

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

Answer 2

Consider including a more targeted property as well:

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

Answer 3

An alternative approach would be to include !important in the rule, although it is not advisable to use it with specificity.

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

Answer 4

An alternative approach would be to include !important in the rule, although it is not advisable to use it with specificity.

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