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?!
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.