Pseudo classes

please see

I want the selected tab to be light green/black text when tabs change (active). And have the non-selected tabs to be dark green/white white text

help please

if i am an idiot and missed something simple, sorry!

:slight_smile: :grinning:

Can you clarify what you mean? You already have that styling applied to :active anchors, that is anchors while they are being clicked upon.
Or did you want this for a different state, such as the .active actual class, not the pseudo class?

1 Like

Hello @OBXjuggler,



to line

.main-nav a:hover {
   background-color: #33ff33;


it worked!

though i feel i was not clear : (

this fault is mine…

what i am after is the page being viewed light green / black text staying there while the visitor is on that page

ALL other links dark green / white text

say a visitor is on my home page

i want the home page tab to remain light green / black text… … never goes away… stays there consistent

UNTIL say a visitor clicks on Links… now i want Links tab to remain light green / black text… … never goes away… stays there consistent

all other links dark green white text

i hope i am clear!

do not want to confuse you

if its helpful, kindly see or the above codepen

yes… i am FULLY aware it needs tweaking. that will happen!! its sloppy and looks bad i know

but for now i politely ask for the navigation to be resolved

i sincerely thank you for your time and guidance!!

There is an .active class (do not confuse with :active) on each page on the current nav link which you can use as a hook for styling.

Try this:


Is that what you wanted?



crisis averted!

please look :grinning:

please explain to me where i was confused? i not only want the code, but i want to understand it

breakpoints and media queries are next.

Paul, should i use max-width in my media queries… working from desktop down?

also, can i change font weights, or even use bold / italic, on google fonts? i coded just one font from various options… there were other options there…

again, i sincerely thank you!

Only you will know that :slight_smile:

I’m guessing that you thought the pseudo class :active was something to do with the currently active page item. :activeis in fact the moment you click a clickable item like a link with your mouse and that is the point you have activated a link or button to do its job. The moment you release the mouse button the active state of that element is gone but not its action if any is required (such as travelling to a destination).

:active is a fleeting state and is only there to show that something has been actioned (if it has been styled to show differently). It is not persistent and doesn’t carry on to other pages.

To style something persistently you need to use a class to that and people seem to like using the classname of .active when in fact .current would be a better name and avoid this eternal confusion :slight_smile:

That’s the way I do it because I’m a desktop first kind of guy :slight_smile: Historically I coded for desktop nly because there was no mobile so that’s the way I like to work. I also find it much easier to break down a large screen display into a smaller screen than go the other way.

However it doesn’t really matter if you work from mobile first and use min-width media queries to build the desktop version instead if that’s the way you like to work.

In the end its up to you and what you find easiest or fits onto your work flow better. Just try not to mix min and max width media queries together because that makes it to complex (there are rare occasions when you will need both but generally best avoided).

When you download the google fonts you should also download the variations of that font that you are going to use (bold, light, italic). If you don’t download the variations a browser ‘may’ try to add a pseudo bold or italic to the font but it won’t be as nice as the real thing. It may be good enough but best not left to chance.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.