::first-letter pseudo-element not working in firefox

Question

I cannot for the life of me figure this one out. I just want to style the dollar sign to be a different color and I would like to avoid using another element around the dollar sign.

<ul>
    <li><strong>John Dow</strong> <div>$5,849,487<sup>84</sup></div></li>
    <li><strong>David Jones</strong> <div>$5,498,364<sup>01</sup></div></li>
    <li><strong>Susie Smith</strong> <div>$5,098,276<sup>35</sup></div></li>
</ul>

And this CSS:

li::first-letter {
    color: blue;
}
li div::first-letter {
    color: red;
}​​

The blue works, the red does not.

http://jsfiddle.net/ryanwheale/KUzUp/

Answer 1

It seems to be due to the $ character not being interpreted as a letter character by Firefox, based on the discovery that replacing the $ with a letter character (A, B, C...) causes the demo to work:

<ul>
    <li><strong>David Wilcox</strong> <div>A$5,849,487<sup>84</sup></div></li>
    <li><strong>David Cowee</strong> <div>B$5,498,364<sup>01</sup></div></li>
    <li><strong>D.J. Johnson</strong> <div>C$5,098,276<sup>35</sup></div></li>
</ul>​

JS Fiddle demo.

Revisiting this question, though, it's worth noting that now you could use CSS generated-content to both supply, and style, a first-character, using ::before:

li div::before {
    content: '$';
    color: red;
}

With the HTML:

<ul>
    <li><strong>David Wilcox</strong> 
        <div>5,849,487<sup>84</sup>
        </div>
    </li>
    <!-- siblings removed for brevity -->
</ul>

JS Fiddle demo.

Answer 2

Everything works as it should do: ::first-letter selects the first letter, but "$" is not a letter but a special character.

Answer 3

Others already explained why it doesn't work, so, a small fix for you to consider: give your money div a class, eg

<li><strong>David Wilcox</strong> <div class="money">5,849,487<sup>84</sup></div></li>

take out the literal $, and put it in :before content, eg:

.money:before {
    content: '$';
    ...
}

Now you can style it however you like.