Understanding CSS selectors
css, css-selectors, html
Solution
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.
Problem
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?!