Color The First Word Of Sentence Css

I was trying to color just first WORD of sentence

Title Of The Page

CSS which am using is .logoS{ padding: 0px; float: left; font-

Solution 1:

Try this, hope this will help .

.logoS:before {
  color: red;
  content: "Title ";
}

<divclass="logoS">Of The Page</div>

Solution 2:

The code

<divclass="logoS"><spanid="first">Title</span>OfThePage</div>.logoS{padding:0px;float:left;font-family:'Open Sans',Helvetica,Arial,sans-serif;color:blue;border:solid1pxblack;font-weight:bold;font-size:22px;}#first {margin-right:20px;color:red;}

Solution 3:

Use a span with preferred style for the first word like

<div class="logoS"><spanclass="spanstyle">Title </span>OfThePage</div>

// CSS
.spanstyle {
  color:blue;
}

Check this link . There is :first-letter and :first-line, but no :first-word.

Solution 4:

Use a span tag, this way it won't start a new line. For example:

<divclass="logoS"><spanid="title">Title</span> Of The Page</div>

and then in your css just add:

#title{
color: red
}

Hope this works!

Solution 5:

There is :first-letter and :first-line, but no :first-word (MDN Search). Just wrap your first word in an element. Fiddle exmaple

<divclass="logoS"><spanid="first-word">Title</span>OfThePage</div>.logoS{padding:0px;float:left;font-family:'Open Sans',Helvetica,Arial,sans-serif;color:blue;border:solid1pxblack;font-weight:bold;font-size:22px;}#first-word {margin-right:20px;color:red;}

Or you can use javascript (here's an example), but if you look at the code, all he does is wrap the first word in a span and add a class.