Inhalte von SPAN je nach Inhalt mit CSS formatieren

[Michi]

Hallo in die Runde,

in einem <span>hallo</span> stehen bestimmte Werte drin.

Ist es möglich das bei bestimmten Werte wie z.B. hier hallo, den Span mittels CSS zu formatieren.

Danke und bleibt gesund

Michi

[Der Martin]

Hallo,

in einem <span>hallo</span> stehen bestimmte Werte drin.

Ist es möglich das bei bestimmten Werte wie z.B. hier hallo, den Span mittels CSS zu formatieren.

nein, CSS kann nicht nach Elementinhalt selektieren, bestenfalls nach Attributwerten.

May the Schwartz be with you
 Martin

[Rolf B]

Hallo,

nein, CSS kann nicht nach Elementinhalt selektieren, bestenfalls nach Attributwerten.

Heißt: Du setzt an der Stelle, wo das HTML erstellt wird, am besten eine passende Klasse an den span.

Wenn das nicht möglich ist, du aber Script auf die Seite bringen kannst, wäre es auch möglich, sich alle span-Elemente anzuschauen (getElementsByTagName) und ihnen bei passendem Inhalt eine highlight-Klasse anzuhexen.

<!-- im head -->
<style>
  span.highlight { background-color: yellow; }
</style>

<!-- am Ende des Body, oder andernfalls in einen 
     DOMContentLoaded Eventhandler verpacken -->
<script>
{
   const keywords = [ 'hallo', 'welt', 'selfhtml' ];
   for (const span of document.getElementsByTagName('span')) {
      if (keywords.includes(span.textContent))
        span.classList.add('highlight');
   }
}
</script>

Wenn deine Highlight-Regeln sich nicht durch einfachen Stringvergleich erledigen lassen, musst Du entweder ein Array aus Regexen oder ein Array aus Prüffunktionen verwenden (und dann natürlich nicht includes verwenden). Das Spektrum ist bunt.

Rolf

[Felix Riesterer]

Liebe(r) Michi,

<span>hallo</span>

vielleicht auch so?

<span data-irgendwas="hallo">hallo</span>
<span data-irgendwas="völlig wurschd">ganz egal<span>

[data-irgendwas="hallo"] { color: red; }
[data-irgendwas$="wurschd"] { color: green; }

Man könnte anstelle von Klassen ein data-Attribut verwenden, welches man mittels CSS selektiert.

Liebe Grüße

Felix Riesterer

[nobody]

Hallo,

warum möchtest du basierend auf dem Inhalt des Elements stylen?

Wenn es rein ästhetische Gründe sind und das Element irgendwo im Quelltext vorkommen kann, gib dem span eine passende Klasse und gut ist.

Vielleicht hat es aber auch semantische Gründe. Dann ist span (ein Element ohne Semantik) falsch und sollte durch ein passenderes Element ersetzt werden. Abhängig davon, wie deine übrige Code-Basis aussieht, kannst du das eventuell über einen einfachen Element- oder Nachfahren-Selektor stylen:

em { color: red; }
.context em { color: blue; }