2

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.

user3753202
  • 517
  • 7
  • 14
  • Selector precedence is the single hardest thing in CSS. Don't try to learn it =) Figure it out when there's a specific problem. – Rudie Nov 01 '14 at 20:02
  • 1
    According to the article that I mentioned, I think that the precedence for the first selector would be 0,0,1,2 and the precedence to the second would be 0,0,0,3. Therefore, I expected that the rule of the first selector was applied... – user3753202 Nov 01 '14 at 20:12
  • Perhaps this can help: http://stackoverflow.com/questions/19118036/same-specificity-after-taking-placement-into-consideration-first-letter-alway – Hashem Qolami Nov 01 '14 at 21:34
  • @HashemQolami - Thanks, it helped, even being a bit different. – user3753202 Nov 02 '14 at 01:17

1 Answers1

4

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.

GuyH
  • 786
  • 1
  • 4
  • 8
  • 1
    Ok, I understand now. This happens because are different elements. The first letter is a different element of li. Thank you for your reply. – user3753202 Nov 02 '14 at 01:20
  • I wasn't implying they are different element as such; they don't actually exist as elements; you won't find them in the DOM for instance. Which is why they are called pseudo-elements, and why I used the word entity not element! They are just a means to identify a part of an actual element, and tell the rendering engine to apply a different style to just that part. – GuyH Nov 02 '14 at 18:13