Color the First word of Sentence CSS

Question

I was trying to color just first WORD of sentence

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

CSS which am using is

.logoS{
    padding: 0px;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: white;
    border:solid 1px black;
    font-weight: bold;
    font-size: 22px;
}

.logoS::nth-word(1) {
  margin-right: 20px;
}

i just want to color "TITLE" not other words, any solution

Answer 1

Try this, hope this will help .

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

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

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

Answer 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.

Answer 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!

Answer 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.