CODEWITHSUNDEEP
csscolorsstylesvisited
Bakura
Bakura

Reputation: 161

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 ?

Upvotes: 0

Views: 35

Answers (2)

Khel_MVA
Khel_MVA

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

Ale Gu
Ale Gu

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

Related Questions