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 element
• b = number of id attributes
• c = number of attributes (classes) and pseudo classes (:link, :hover)
• d = number of elements and pseudo-elements (:first-line, :first-letter)

With the following styles (my calculations to the right):

.content          {color: green;}   /* a=0 b=0 c=1 d=0 -> 0,0,1,0 */
.content:hover    {color: yellow;}  /* a=0 b=0 c=2 d=0 -> 0,0,2,0 */
li                {color: orange;}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
li:first-line     {color: pink;}    /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */

and the following html

<li class="content">The first line</li>

When I open it up in a browser, the line of text is pink. I thought it would be green and on hover, it would be yellow. I thought that elements and pseudo-elements (the d in the calculation) have less weight than classes and pseudo classes (the c in the calculations).

Answer 1

I guess that :first-line is more specific than just .content. So the first line of the text is pink, but the bullet of the list is green (and yellow on hover). Everything is good, as for me.

Imagine that the :first-line selector is just a nested text node selector, like:

<li class="content">
     <text:text>The first line</text:text><br />
     The second line
</li>

It operates on the nested element, so it is more important than any other selector.