:nth-letter pseudo-element is not working

css, firefox

Solution

There is no `:nth-letter` pseudo-element (and no `:first-char`) in CSS. The `:first-letter` pseudo-element (which the question mentions in the title and in the prose but does not use in the code) works, but to color other letters, you must wrap each of them in an element of its own, normally `span`.

Problem

as I build a site for my bakery I would like to make a fancy headline triggering the color for each letter. So I could make use of span but this is exhausting. I wanted to use `:first-letter` or respectively `:first-char` but nothing works. Does anyone of you have an idea how to do it? Thanks and Saludos! ``` h4 { font-size: 100px; margin-bottom: 20px; margin-top: 0; padding: 0px; font-family: "Tangerine", cursive; font-weight: normal; } h4:nth-letter(2) { color: #06c !important; } h4:nth-letter(3) { color: #c9c !important; } ```

Original source