CSS-Selektor first-word mittels jQuery umsetzen

Mit CSS-Selektoren wie first-child, first-line oder first-letter ist es schnell und einfach möglich, den Beginn von Texten etc. individuell zu formatieren, ohne entsprechende Elemente verwenden zu müssen. Leider fehlt hierbei das Pseudoelement first-word, um das erste Wort eines Textes anzusprechen. Natürlich kann man dies manuell lösen, indem man z.B. den span-Tag benutzt:

  1. <span class="first-word">Erstes</span> Wort

Solange, wie man die Texte manuell pflegt, geht das auch einwandfrei. Aber ich sitze aktuell an der Entwicklung eines Templates, dessen Inhalte über ein CMS erfasst werden und die Nutzer des CMS nicht unbedingt alle HTML- / CSS-versiert sind. Also musste ich eine andere Lösung finden und die geht mittels jQuery.

Als Beispiel nehme ich eine Überschrift, die ich mit der css-Klasse first-word kennzeichne:

  1. <h2 class="first-word">Hier steht der Text</h4>

In der CSS-Datei definiere ich die Eigenschaften des H2-Tags, z.B. die Schriftfarbe, und ergänze zusätzlich eine andere Farbe für einen span-Tag nach dem H2-Tag:

  1. h2 { color:#828A92; }
  2. h2 span { color:#4791ce; }

Und folgender Javascript-Code muss genutzt werden:

  1. jQuery(".first-word").each(function(){
  2. var me = $(this), fw = me.text().split(' ');
  3. me.html( '<span>'+fw.shift()+'</span> '+fw.join(' ') );
  4. });

Durch das jQuery-Script wird das erste Wort im Text zusätzlich mit dem span-Tag umschlossen und somit kann diesem Wort eine andere Farbe, eine andere Schriftart etc. zugewiesen werden. Und man ist unabhängig davon, dass der Erfasser im CMS selber an den Tag denken muss.

Vielleicht kann der ein oder andere diese Idee selber mal als Anregung gebrauchen, über alternative, ggf. bessere, Vorschläge zur Vorgehensweise würde ich mich sehr freuen.

2 Kommentare to “CSS-Selektor first-word mittels jQuery umsetzen”


  1. Das Skript ist echt super! DNAKE für den Post.

    Habe es gerade für ein Menü innerhalb eines CMS eingesetzt – auch hier wäre manuell nichts zu machen gewesen.
    Wie wäre denn die Abwandlung für „last-word“ ?


  2. Freut mich, dass es hilft, Sandra. Für eine „last-word“-Umsetzung habe ich aber leider selber aktuell keine Idee, das dürfte etwas schwieriger sein. Wenn mir noch eine Idee einfällt, melde ich mich bei Dir.

    CU Frank-Andre

Kommentar erfassen