Question

I have some html in this format:

<ul id="foo">
    <li class="bar"><a href="#">Reports</a>
      <span>
        <a href="#" class="fooLink">First Report</a>
        <a href="#" class="fooLink">Second Report</a>
     </span>
  </li>
</ul>

Essentially, I want the ‘reports’ link in the menu to expand when clicked, and display the links below it, padded to the side, so it looks like this:

Reports
   First report
   Second report

This is my css code:

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block;
}

However this doesn’t work. If I examine the links in firebug, I see that the display:block; line is blocked. However if I do this:

<a href="#" 
   style="padding-left:20%; padding-top:0px; display:block;">Second Report</a>

Then it works as I want it. Why doesn’t it work if i put it in the css class?

Answer 1

Applying CSS via the style attribute always* trumps styles provided via stylesheets, due to specificity, as @Kirean mentions.

That means that when you move your CSS to an external stylesheet, it has to compete with other defined styles.

You can make your style selector more specific than the other definition, but you have to know what you are competing with.

.fooLink is more specific than a

a.fooLink is more specific than .fooLink

span a.fooLink is more specific still, etc, etc

According to the W3C specification, your .fooLink selector can be trumped by any selector with: more class selectors (.foo .fooLink), the same number of class selectors and more type selectors (.foo a), or any selector with an ID (#foo *), assuming the selector applies to the same element.

Now, the caveat (as implied by the asterisk above) is that you can override this behavior using !important. !important trumps other defined style attributes. If there are multiple !important declarations, they are resolved according to standard specificity rules.

So, the best solution is to make your style as specific as possible, and edit other styles which may be conflicting.

If, however, those other definitions are out of your control (site-wide CSS stylesheets or something like that), use !important:

.fooLink
{
    padding-left: 20%; 
    padding-top: 0px;
    display:block !important;
}