How to style first word or first 5 letters

[newcoder1010]

Hello, 

<div class="views-field views-field-title"><span class="field-content"><a href="/minus cost" hreflang="en">minus cost</a></span></div>

views-field views-field-title::nth-letter(5){
color:red}

How to style first 5 letters or the first word? Above css did not work for me. Thanks!

[dsonesuk]

First of all, they are NOT defined as class names with '.'

Second: '.views-field-title' is defined as child element if a space exists between previous class name.

Third: Have you tried nth-bugsbunny its has just as much chance as the non existing nth-letter psuedo property working.

You have to wrap the word with a inline element such as span, b, i element with class name, then style that class name to what you want.

The only one existing is a:first-letter.

You could also use

.views-field.views-field-title a:before {

content: "minus "; display: inline; color: lime ;

}

Edited August 29, 2020 by dsonesuk

[newcoder1010]

I need to do some study.  I can have title without the word minus. Luckily I can modify the title. After that, I will have a:before to include minus as content so that I can style the word minus. This will do the trick. However, I cant modify the title for other blocks. For that, I need to do some study to see how to style the first few letters or the first word. 

Thanks!

[dsonesuk]

Again! currently you can't!

You have :first-letter and :first-line, thats it!

The other option is javascript, get and remove required characters from line, create span with class name, add required characters in span, then prepend the span where it came from and style.