Why can't I override existing pseudo-elements?
Question by DanMan
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?
Answer by DanMan
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.
Answer by Starx
The first rule is more specific than the second one, so in a case when both the selectors are valid, the more specific one overrides other.
Read this article to know how can we overcome such complications of having conflicting styles. To brief them, Here is how specificity are calculated.
+--------------------+--------------------+-----------------------------------+ | Type | Specific Value | Example | +--------------------+--------------------+-----------------------------------+ | Inline Style | 1000 | style="color: #f00;" | +--------------------+--------------------+-----------------------------------+ | Id | 100 | #text { color: #f00; } | +--------------------+--------------------+-----------------------------------+ | Classes | 10 | .text { color: #f00; } | +--------------------+--------------------+-----------------------------------+ | Pseudo Classes | 10 | a:hover { color: #f00; } | +--------------------+--------------------+-----------------------------------+ | Pseudo Elements | 10 | a:first-child { color: #f00; } | +--------------------+--------------------+-----------------------------------+ | Elements (tag) | 1 | a { color: #f00; } | +--------------------+--------------------+-----------------------------------+
Basically, Class Selectors are more specific than tag selectors.
Lets calculate your specificity
- For first rule: 31
- For second rule: 30
SO the first rule wins.
You can increase the specificity of the second rule like
.some tr td.other:before {
content:url('path/to/image2.png') ;
}
Its calculate to 33, to override the style first rule.
