CODEWITHSUNDEEP
cssoperator-precedence
user3753202
user3753202

Reputation: 525

CSS Precedence strange behaviour

I was researching precedence in CSS and reading some articles, including this: http://www.w3.org/TR/CSS2/cascade.html. According to him, attributes like classes have higher precedence over pseudo-elements. However, when I did a simple test, the opposite happened. Below, my code:

HTML:

<ul>
    <li class="item">Item</li>
</ul>

CSS:

ul li.item { font-size: 12px; }
ul li:first-letter { font-size: 20px; }

See it here. Why the font-size of the first letter has 12 pixels instead of 20 pixels if the class has higher precedence than pseudo-elements? Thanks in advance.

Upvotes: 2

Views: 92

Answers (1)

GuyH
GuyH

Reputation: 796

I have just looked at your fiddle in Firefox, and you don't have a problem, it is working correctly. The font size of the word is 12px as asked for. But the first-letter pseudo element is all about identifying the first letter as a separate entitiy, and giving it a different style to that used for the rest of the word. As such, the specificity of the first letter is entirely separate from the specificity of the whole word; they do not override each other. So your first letter in the fiddle is correctly 20px.

Upvotes: 4

Related Questions