Boardunity & Video Forum - CSS: :first-letter doch nicht so flexibel?

Hallo!

Trotz der offensichtlichen Sommerpause hier mal ein kleines Problemchen..

Entweder stelle ich mich zu blöde an oder es geht wirklich nicht.

Vorwort:
Auf vBulletin.com suchte jemand nach ner Möglichkeit in einer Überschrift (<h1 />) den Anfangsbuchstaben jedes Wort in einer anderen Farbe darzustellen.

Ich hatte da nun folgende Möglichkeit vorgeschlagen:

Code:

<h1><span class="blue">t</span>his <span class="red">i</span>s <span class="yellow">a</span> <span class="green">t</span>est </h1>

Die Möglichkeit ist aber mehr als unsauber und sollte nicht verwendet werden!

Gerade eben habe ich mir dann weiter Gedanken gemacht und bin zu einer anderen Lösung gekommen. Da bin ich aber gleichfalls auf ein Problem gestossen.

Nun erstmal mein Lösungansatz, Profis werden den Fehler recht schnell bemerken:

Code:

<h1>

<span>this</span> <span>his</span> <span>is</span> 

</h1>

und CSS:

Code:

h1 span:first-letter {

        color: red;

 }

h1 span + span:first-letter {

         color: blue;

  }

h1 span + span + span:first-letter {

         color: green;

  }

Das geht aber garnicht.. Das Element auf welches ich den Pseudo-Selector
:first-letter anwende muss (und so stand es in keiner CSS-Referenz) ein Block-Element sein. <span /> wird standardmässig aber als inline dargestellt.

Ich habe das ganze nochmals mit ein paar Lösungansätzen zusammengefasst:
http://www.validhtml.com/firstlettertest.html

Wie man dort erkennen kann produziert das ganze arg merkwürdige Ergebnisse wenn es mit float kombiniert wird.

Mich würden zu dem Thema mal eure Gedanken und Lösungsansätze interessieren.

(Und ja, ich habe Spass daran mir bei 25+ Grad den Kopf über sowas zu verbrechen ;))