I have a string and want to apply different css classes on certain string indexes.

const string = "Tip. \n Please search using a third character. \n Or use a wildcard."

I am able to target the first line with the css classes using ::first-line, but how would I be able to target and apply another classes to only the words "character" and "wildcard" to that string? Or how would I do this javascript/react?

Thanks

CodePudding user response：

You should probably use <span> around the words you want to target.

Together with:

document.getElementById(”string-container”).innerHTML = "Tip. \n Please search using a third <span class=”ch”> character. <span/> \n Or use a <span class=”wc”> wildcard<span>."

CodePudding user response：

CSS is not designed to do what you are after.

A CSS Pseudo element represents entities that are not included in HTML. A list of all pseudo elements indicates that there are none that can select arbitrary strings.

You would have to use JavaScript to achieve that you are after.