Understanding CSS selectors

Question

Why is it that the below makes the text red?

#stories li a {color:red}
.default li.expand a {color:green}
li.expand a {color:blue}

---

<ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>

Only if I put #stories on the others will the text change. Does a # have more dominance even though it's further up the css?!

Answer 1

It's a matter of "CSS Specificity". Andy Clarke's article CSS: Spcificity Wars does a pretty good job explaining it with a little humor. Although Eric Meyer adds more clarity in his comment.

Answer 2

According to http://htmldog.com/guides/cssadvanced/specificity/, '#' (An id selector) has the highest specificity, so yes, anything with a '#' will precede anything which doesn't, if they refer to the same thing.

Check that link for more info.