CSS specificity confusion

Question

I have following markup:

<div class="breadcrumbs">
    <span id="links">
      <a href="/home.html" class="pointer">home</a>
      <span>&gt;</span>
      <a href="/module/users.html">users</a>
    </span>
</div>

My styles are defined like this:

.breadcrumbs{/*styles for breadcrumbs div*/}
.breadcrumbs span a{cursor:default/*other styles for breadcrumbs links*/}

a.pointer{cursor:pointer;}

On my page, the links show default cursor (arrow) and the style a.pointer is shown striked in IE10 console and firebug.

My confusion is that as pointer class is applied directly to anchor element, should not it override the one picked from .breadcrumbs span a match?

Answer 1

No, of course it shouldn't. The rule of specificity says that more specific the selector, the more precedence it will have. So in your case when you created a class that applies to all the anchor tags, and then another class which applies to anchor tags within a certain other html tag (div), then the second one will have a higher precedence because it's narrower in its targeting.

You could check out this great article from Smashing magazine to understand the rules of specifity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/