CSS .class a {} not working

This algorithm just stopped working on my page (it had worked for over a year as it was):

<div> <a href="#">Link Text</a> </div> .classA a { style: actual style; } 

The a tag no longer picks up the style in the css. Now in order for my a tags to pick up the style I have to give them a class specifically and this works:

<div> <a href="#">Link Text</a> </div> 

Did something change recently in IE7 or FireFox4 that would break the first algorithm? I'd prefer to fix the css rather than inserting a class onto all of the relevant a tags on several pages.

Edit to show better the actual styling:

This no longer works (links have vanilla 100%-blue-underline styling) but had been working for quite some time. Note that it was first designed for IE6, survived the switch to IE7, but has subsequently stopped picking up its style. Hopefully this helps all of you who have graciously tried to answer!

-- HTML -- <div><a href="#">LinkText</a></div> -- CSS -- * { margin: 0; padding: 0; overflow: hidden; font-family: verdana, arial, sans-serif; } .ovalButton { position: absolute; width: 150px; height: 60px; } .ovalbutton a { background: url("logo_butn.gif") no-repeat; display: block; color: #0063B5; width: 150px; height: 60px; overflow: hidden; font-size: 80%; font-weight: bold; text-decoration: none; padding: 16px 15px 20px 0; text-align: center; } .ovalbutton a:Hover { background: url("logo_butn_highlight.gif") no-repeat; } #oval1 { top: 12px; left: 300px; } #oval1 a { padding-top: 25px; } 

When I copy the exact styling from .ovalbutton a {} to a separate class and apply that class to the link in the html, it works fine.

5 Answers

The problem is here:

.ovalbutton a { 

The capitalization does not match:

<div 

You can change your CSS selector to .ovalButton a to fix this problem.

Not knowing your full CSS, I can't say for sure, but it sounds likely that you are running into a CSS specificity issue.

The issue with your code as entered in your question is that the capitilisation on the class and CSS selector is different

ovalbutton vs ovalButton 

you can see this corrected and working at (no background images)

It works for me, are you sure that the CSS selector, .classA a, is the problem? JsFiddle Demo

Nothing has changed in this respect and your selector should work.

Try to reproduce your problem on separate page and you will see.