CSS Prioritize Strange Behavior
I have studied CSS precedence and read some articles, including: http://www.w3.org/TR/CSS2/cascade.html . Attributes such as classes take precedence over pseudo-elements, he said. However, when I did a simple test, the opposite happened. Below is 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 here . Why is the font size of the first letter 12px instead of 20px when the class has higher precedence than the pseudo-elements? Thanks in advance.
source to share
I just looked at my fiddle in Firefox and you have no problem, it works correctly. The font size for the word is 12 pixels upon request. But the pseudo-element of the first letter is defining the first letter as a separate object and giving it a different style used for the rest of the word. Thus, the specificity of the first letter is completely separated from the specificity of the whole word; they do not override each other. So, your first letter in the fiddle is correct 20px.
source to share