Colored Word Sentence CSS

Question

I tried to color only the first word of the sentence

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

CSS that I use

.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 in other words, any solution

Answer 1

Try this, hope this helps.

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

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

Run code

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

,

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

// CSS
.spanstyle {
  color:blue;
}

. :first-letter :first-line, :first-word.

Answer 4

span, , . :

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

CSS :

#title{
color: red
}

, !

Answer 5

There are: first-letter and: first-line, but no: first-word ( MDN Search ). Just wrap your first word in an element. Exmaple script

<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 an example ), but if you look at the code, everything that it does will wrap the first word in span and add a class.