Why can't I override existing pseudo-elements?

Question

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 is the HTML snippet:

 <table class="some"> <tr> <td class="other">Text goes here</td> <td>Some more text.</td> </tr> </table> 

Both should apply to the same cell in the table. One who does not have a class is implied as a reserve. But for some reason, he always chooses the first rule over the second. I know that the second one works, as it will be used if I disable the first one in Firebug.

What am I missing here?

Answer 1

Well, to put it directly, after, this is the specifics:

• Id: 100
• classes: 10
• pseudo-classes: 10
• pseudo-elements: 1
• elements: 1

Thus, the first selector has a specificity of 22, and the second is only 21. Apparently, the first-child is represented by a pseudo-class, not a pseudo-element.

Finally, adding td to .other does the trick, since then the order of the document takes precedence.

Answer 2

I am sure that this is due to the specifics. Try adding !important to the second rule and see if this works.

Answer 3

The first rule is more specific than the second, therefore, in the case when both selectors are valid, a more specific one redefines the others.

Read this article to find out how we can overcome the challenges of conflicting styles. To talk about them, here's how the specifics 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; } | +--------------------+--------------------+-----------------------------------+ 

In principle, class selectors are more specific than tag selectors. Allows you to calculate your specificity

• For the first rule: 31
• For the second rule: 30

SO first rule wins.

You can increase the specification of the second rule, for example

 .some tr td.other:before { content:url('path/to/image2.png') ; } 

Compute it to 33 to override the first rule of the style.