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 ";
}

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

Solution 2:

The code

<div class="logoS"><span id="first">Title</span> Of The Page</div>

.logoS{
    padding: 0px;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: blue;
    border:solid 1px black;
    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"><span class="spanstyle">Title </span>Of The Page</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:

<div class="logoS"><span id="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

<div class="logoS"><span id="first-word">Title</span> Of The Page</div>

.logoS{
    padding: 0px;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: blue;
    border:solid 1px black;
    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.