Pseudo class issue, kindly help

Projects Personal Projects
1

had a rough time making a codepen

if this doesnt work, tell me how to share my code

can i post my HTML and CSS here?

i hope you can help me

kindly see www.forallthetime.com

ok, what i am after is a pseudo class i think

i want the dark green link to have color white (text) as its initial state (not doing anything with the link… leave the link be)

AND have the bright green link have color black (text)

then i will code link by link using this scenario

each link by link being bright green and the others dark green

i think i can take it from there

MANY THANKS!!!

2

Hi Obxjuggler,

I’m not too sure what you’re looking for.
I can see that on load you have the selected link with a light green background and black text, and the others having dark green background and black text (both go white on hover).

Is it that you want the selected one to be light green/black when you change tabs? And have the non-selected tabs to be dark green/white?
Or do you want them to alternate color no matter if they’re selected or not?

3

YES!

BINGO!

that’s what i am after!

i really want to see the proper code

was a head scratcher for me!

i sincerely thank you for your time and guidance :smile:

4

Well you’re definitely on the right track already :slightly_smiling_face: you’re so close!

You already have an active class, so now you just need to put it on the other tabs when they’re clicked on.
Since you have separate HTML documents (one for index.html, one for links.html, one for articles-and-books.html etc) you can just go into each of those, and add the active class to the appropriate tag (exactly as you’ve done on the index.html one).

This way when they’ve loaded the index.html page, the index page will be highlighted (as you’ve done), but then also when they click on the links page the links tab (now with the active class) will be highlighted instead!

Just make sure you remove the active class from the tabs you don’t want to be highlighted!

Then I’d just make sure that the styling is what you want. Make sure you’re telling the active class to have black text, and make sure you’re telling the main-nav to have white text (or just leave as is so it’s white on hover!).

Let me know if you need any more help!

5

cannot make it work :frowning:

i tried tweaking all my code, no go

i tried making a class main-nav (as was suggested) and that doesnt work

codepen

foralthetime.com

not sure how helpful

kindly pass on to me the code that works

again, thanks!