:active (text link color while active)

This topic contains 4 replies, has 2 voices, and was last updated by  Sebastian 11 months ago.

Author Posts

felipeaf

Hi all,

I’m trying to set a text link to change the color while it is active.

I tried the pseudo class “:active”, but it didn’t change.

#menu-item .menu-link:active {
color: rgb(232, 250, 11);
background-color: rgb(244, 12, 12);
}


Sebastian

Hey,

Would you mind sending me a link to the page? Also, can I just confirm what you mean by ‘active’, as there can be multiple meanings for this.

The :active pseudo selector takes effect for the brief moment while the user’s mouse is being clicked.

The menu link for the current page is also referred to as ‘active’ sometimes. The theme normally adds an extra class to the menu item for the current page. So you would target it using the following type of selector:

#menu-item .menu-link.current-menu-item {
color: rgb(232, 250, 11);
background-color: rgb(244, 12, 12);
}

Or more simply:

#menu-item .current-menu-item {
color: rgb(232, 250, 11);
background-color: rgb(244, 12, 12);
}

Does that make sense?

Thanks,
Sebastian


Sebastian

P.S. if you really do want to be using :active, it is likely that the theme is overriding your Microthemer selector. So you could try setting !important on the color style. Or increasing the specificity score of your selector. See our tutorial on CSS specificity for more info.


felipeaf

Hi Sebastian, thanks for answering me.

The page is not online, is local for now :/

I’ve tried both examples, and the !important setting is enabled, but no success.

What I want is, when you click a link, this current link change the color while you keep there.

Cheers!


Sebastian

OK, so using :active is the right call. It’s hard to say exactly how to overcome this without viewing the site. But another thought I’ve had is to use :focus as well. So your selector would look like this:

#menu-item .menu-link:active,
#menu-item .menu-link:focus {
color: rgb(232, 250, 11) !important;
}

It’s possible the theme sets a focus color which you also need to override.

Cheers,
Sebastian

You must login or register to reply to this topic.