Inheriting Link Colour

Ever do something so glaringly obvious you wondered why you've never done it before? I feel like this is one of things that everybody does because it is so obvious. Here is the scenario: you want your link colour to match the content around it but you have different colours for things like body, navigation and footer. Traditionally, I've set up styles for each area independantly like so:

#nav { color: #9C0; }
#nav a { color:#9C0; }
#content { color:#333; }
#content a { color:#333; }

Then the lightning struck. Why not just tell all links to inherit their colour?

a { color:inherit; }
#nav { color: #9C0; }
#content { color:#333; }

Now the links will match in colour to the text around it. Too easy.

Update: Seems I spoke too soon. Neither IE6 or IE7 (Beta Preview 2 MIX06) support this. *sigh*

Published March 20, 2006 · Updated March 21, 2006
Categorized as HTML and CSS
Short URL: https://snook.ca/s/556

Conversation

16 Comments · RSS feed
Johan said on March 21, 2006

some observations:

If your text and link needs to be styled with the same colour, you could achieve this too by using the * selector?

#nav * { color: #9C0; }
#content * { color:#333; }

Normally links should be distinct from any text by making them bold, underlined, a different color or other.

I am pretty sure the inherit CSS rule is widely underused. So in the end I am glad it is promoted as such.

Dustin Diaz said on March 21, 2006

Damn, and I was going getting excited too just reading it through bloglines...then I saw the update.

Too bad.

Johan, the universal selector is going to screw up a lot of other things - the point i think the point snook is making is that he just wants links to inherit color...not "everything"

Johan said on March 21, 2006

@ Dustin I see your point. All in technicolor.

Michael Heilemann said on March 21, 2006

I was all 'w00t' and then I was all 'doh!'...

Jens Meiert said on March 21, 2006

Yes, "inherit" is a very useful value. When broadly implemented.

Alexander said on March 21, 2006

Truly brilliant, how come noone have thought of this before (atleast I haven't seen it elsewhere).

IEs lack of support is sad, but I will probably use this anyway. I don't care if IE-users get a distorted layout (actually I think designs should stop with the constant workarounds for IE (except maybe for major things) this - more then anything - would force IE to adapt the standards. The websites are supposed to degrade, if people are using old browsers they get the content, but layout etc. may be distorted).

James Mitchell said on March 21, 2006

Sweet, I had never thought about that. What a way to save some time. Too bad IE seems to be out of the loop again. Well back to more hacks and/or long hand coding.

Ditto on the *sigh* .

eric said on March 21, 2006

I've been using this on my latest redesign, but only in one spot on my admittedly messy CSS. I wanted a way to toggle tags on and off for del.icio.us posts, and I also wanted the toggle link to change with the status. The toggled text was set to display:none; and color:inherit; and used the same class as the toggled tags. Saved me some code.

Kind of difficult to explain, but it works well in civil browsers.

KarmaDude said on March 21, 2006

I was all ready to go clean up my css files, till I read the update. I don't really care about IE, but I have like 40% of my readers using IE, so I guess I will have to wait for IE to catch up before I make any changes.

patrick h. lauke said on March 21, 2006

but, as a halfway measure, you can still have multiple comma-separated selectors, which is what i normally tend to do

#nav, #nav a { color: #9c0; }

Blair Mitchelmore said on March 22, 2006

I remember when I first became obsessed with web standards and I read everything I could find about css and I tried inherit on links for the same functionality. I used IE at the time so I figured it didn't work at all. It's interesting to know that the rest of the pack does support it...

Dougal Campbell said on March 22, 2006

Yup, we had a design problem come up recently at work and I suggested using inherit, but then someone else pointed out that IE doesn't grok it.

Feh.

Stepan Reznikov said on September 24, 2008

The problem in IE can be fixed with a little expression:

a { color: expression(this.parentNode.currentStyle.color); }

What do you think?

Martijn Voerman said on October 01, 2008

Stepan: brilliant!

Lethal said on December 10, 2008

That's more than brilliant stepan thank you so much :)

Jonathan said on February 02, 2009

Great idea Stepan. I was just getting very frustrated with IE's lack of support for 'inherit', and you've shown a general way that it can be used (and it works for any attribute!).

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.