Styling Links Help!

[CassieNoelPhoto]

I’m trying to figure out how to change the color of my link when you are on that certain page. For example, the text is always gray, but when you are on the about page the about button will be blue.

Thank you for your help!

[TheDoc]

Is this a static site? Is this a WordPress site?

Either way, you’ll need a different class to be applied to your link. Most people like “current” or something similar. Then with CSS you can apply a different style to it! Do you have a link to the site in question? People can give you very specific answers if that’s the case!

[snillor]

There are several ways to do this; what TheDoc says is probably the simplest.

One other thing to consider: it’s never made sense to me to have a functioning link to the page you’re already on. So I usually remove the “home” link on the home page, the “about” link when on the about page, and so on. Usually the links (and these “non-links”, to which I give a class of “URhere”), are list items in an unordered list. I simply style the links as I want, and the URhere class differently to indicate that it’s not a link so don’t bother clicking. Depending on the color scheme, I style URhere darker or lighter or grayer or less saturated – whatever makes it less conspicuous.

[TheDoc]

I actually prefer the opposite method. I would rather make it more clear to the user what page they are on.

[Chris Coyier]

https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

[chauger]

Just another approach:

Base Styles
a {color: #ccc;}

About Page Styles
.aboutPage a {color: #003399;}

On your about page body add a class “aboutPage” so you can scope anything else you want to be different (links, margins, padding, etc…)

Whatever

Chris posted a link above that explains this in more detail. Though he used the “id” this will give you higher specificity than the class I used. The id may limit your flexibility a little.

Specificity Rules:
Chris has information on this too. You may want to take a look at that too.
https://css-tricks.com/specifics-on-css-specificity/

Most to>>>>>>>>>>>>>>>>>>>>>>>>Least Specific
Style Attributes, ID, Class/Psuedo-Class/Attributes, Elements

Chris’ Specificity: 0,1,0,1 (higher)
My Specificity: 0,0,1,1 (lower)

Hope this helps.

[Author]

Posts