Different colors inside the tag H1

Question

Is there any way to apply different colors to each snippet of a text within:

<h1>Cor1 Cor2 Cor3</h1>

Answer 1

EDIT: Single tag option <h1> and background-image:linear-gradient three-colour.

h1 {
    display: inline;
    width: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, purple 0%, purple 33%, limegreen 33%, limegreen 66%, blue 66%, blue 100%);
}

<h1>G1 G2 G3</h1>

OBS: For each more word you have to go including the colors within the linear-gradient. Note that I only put 3 colors in, 0%-33%, 33%-66%, 66%-100%. For 4 colors and 4 words sera 0%-25%, 25%-50% etc... (may vary percentages depending on the size of the words)

---

Can to do with the adjacent selector thus h1 + h1 + h1 {...}

Take the example:

h1 {color: blue; display: inline}
h1 + h1 {color: red}
h1 + h1 + h1 {color: green}

<h1>P1 </h1>
<h1>P2 </h1>
<h1>P3 </h1>

---

There are selectors for the first letter and to the first line. Thus

::first-letter
::first-line

But for first word and last word not yet succeed, however it is already in the "Road Map" of CSS4, you can find some references about it in Google.

And here’s a very interesting article about that: https://css-tricks.com/a-call-for-nth-everything/

If you want to do with Javascript, here is a very popular option http://letteringjs.com/

Answer 2

You can assign classes to span within H1 and swap color with css.

.color1{
        color: red;
 }
.color2{
         color: black
}
.color3{
        color: blue
}

<h1>
         <span class="color1">Cor1</span>
         <span class="color2">Cor2</span>
         <span class="color3">Cor3</span>
    </h1>

Answer 3

It’s just one more option!

.cor1{
   color: red;
}
.cor2{
   color: green;
}
.cor3{
   color: blue;
}

.cor1, .cor2, .cor3 {
   display:inline;
}

<h1 class="cor1">Cor1</h1> <h1 class="cor2">Cor2</h1> <h1 class="cor3">Cor3</h1>

Answer 4

Try this:

CSS:

h1 {
    font-size:22px;
    color:#341C12;
    font-weight:normal;
    font-style:italic;
}
h1 .h1color {
    color:#862E06;
}

HTML:

<h1>News <span class="h1color">&amp; events</span></h1> 

taken from here