CODEWITHSUNDEEP
css
user3471438
user3471438

Reputation: 375

change color of first letters of few words of a string using css

I have a string "I am a good person." I need to highlight the first letters of words 'I', 'good', 'person' - I, G, P using css. Is this possible?

<table> 
   <tr> 
      <td width="70%" class="heading"><strong>I am a Good Person</strong>
      </td> 
   </tr> 
</table>

Thank you..!

Upvotes: 1

Views: 1823

Answers (3)

Patrick Mlr
Patrick Mlr

Reputation: 2965

This could be one solution for this.

For more information, see the ::first-letter Selector.

td div::first-letter {
  color: red;
}
<table> 
   <tr> 
      <td width="70%" class="heading"><strong><div>I</div> am a <div>Good</div> <div>Person</div></strong>
      </td> 
   </tr> 
</table>

Upvotes: 2

Durga
Durga

Reputation: 15604

.highlight{
 color: red;
}
<table> 
   <tr> 
      <td width="70%" class="heading"><strong><span class='highlight'>I</span> am a <span class='highlight'>G</span>ood <span class='highlight'>P</span>erson</strong>
      </td> 
   </tr> 
</table>

Use span tag and add your style to highlight.

Upvotes: 4

pharesdiego
pharesdiego

Reputation: 119

You could use span tags like this:

<td width="70%" class="heading"><strong><span>I</span> am a <span>G</span>ood <span>P</span>erson</strong>

And then use a css rule like:

.heading strong span{
   color: blue;
}

Upvotes: -2

Related Questions