How do CSS specificity levels between classes/pseudo-classes and elements/pseudo-elements work?

Question

I\'m using the following definitions (adapted from the CSS2 spec http://www.w3.org/TR/CSS21/cascade.html#specificity )

• a = using the style attribute on an elem

Answer 1

Your understanding of specificity is completely correct. Pseudo-classes and classes are equal to each other in specificity, and both of them rank higher than pseudo-elements and elements (which are also equal to each other). This is explained pretty clearly at the spec you already linked to.

So why do the rules you set in li:first-line take precedence over the ones you set in .content:hover, if the latter is more specific?

Because, from CSS's perspective, pseudo-elements are elements. That means that you have a li:first-line element which - if you didn't style it - would inherit color: green or color: yellow from the .content and .content:hover rules. But rules that target an element directly always take precedence over inherited rules, and your :first-line selector is targeting a pseudo-element within your li. The :first-line rules win simply because they are not inherited and the rules from .content and .content:hover selectors are inherited (by the pseudo-element contained within the li). Specificity rules are a red herring; they don't even come into play.