Why can't I override existing pseudo-elements?
css, css-specificity, pseudo-element
Solution
Ok, to put this straight, after some reading, this is the specificity:
- Id: 100
- classes: 10
- pseudo-classes: 10
- pseudo-elements: 1
- elements: 1
So that makes the first selector have a specificity of 22, and the 2nd of just 21. Apparently `first-child` seems to be a pseudo-class and not a pseudo-element.
Finally, adding a `td` before `.other` does the trick, since then document order takes precedence.
Problem
I have two CSS rules following each other: ``` .some td:first-child:before { content:url('path/to/image.png')" " ; } .some .other:before { content:url('path/to/image2.png')" " ; } ``` Here's the HTML snippet: ``` <table class="some"> <tr> <td class="other">Text goes here</td> <td>Some more text.</td> </tr> </table> ``` They're both supposed to be applied to the same table cell. The one without the class is meant as a fallback. But for some reason, it's always choosing the first rule over the second. I know the 2nd one works, since it will be used if i disable the first one in Firebug. What am I missing here?