CSS make every letter in a text of a different colour

Question

Hi i have to make a text that have different colour for each letter. I have tried to do this, it works. I want to know if there is a faster way to do this, using only CSS.

p {font-size: 36px;
   font-family: sans-serif;
   }
.blue{color: blue;}
.rosso{color:red;}
.grigio{color:grey;}
.oro{color:gold;}
.fucsia{color:fuchsia;}
.verde{color:green;}
.giallo{color: yellow;}
.rosa{color:pink;}

I use it in html:

<p><span class="blue">F</span><span class="rosso">i</span><span class="giallo">l</span><span       class="verde">o</span></p>

Answer 1

You can use css nth child selector - p:nth-child() for doing it, specify your item number inside bracket(1,2,3 etc) as per your requirements and set color for it.