I was playing with my CSS WordPress skin this weekend and had some trouble getting the color I wanted applied to certain <a> tags.

Here is the document structure:

The ‘.storycontent’ class sets both a light background color and the text color to black. The body background color is dark green. So I wanted the <a> tag in the <div class=".storycontent"> to be black and the <a> tag in the <p> tag below it (I was adding this tag) to be white. When I added the styling definition to turn the bottom link white, the link inside the <div class=".storycontent"> also turned white. This is not what I wanted.

I experimented with a number of combinations that I had expected to work but didn’t. Here are some examples.

I thought this would work, but it didn’t:

This didn’t work. It looked like this:

Removing the p notation didn’t work either:

This didn’t work either. It still looked like this:

This finally worked:

I actually tried about a dozen or two permutations of this before finding the notation that worked.

My assumption is that in order to override a class, you need to define it from the same starting point (#content in this case). I think the ‘#content a’ definition ( applied to the <div id="content"> ) is inherited down through the <div class="storycontent"> to the <a> tag inside it. Trying to specify styling on the <a> tag inside the <div class="storycontent"> by declaring it from the ‘.storycontent’ level just wasn’t taking. When I declared it from the <div id="content"> level, it was applied as expected.

Can anyone verify or dispute this? It drove me nuts for about 20 minutes during the 49ers/Vikings game yesterday. 🙂

You can see it all in action here on my Golf site.