CSS :nth-letter()

Adobe is working on implementing :nth-letter() in Webkit:

The desired syntax was :nth-letter(), where the argument would (ideally) take the same values that :nth-child() can (e.g, a simple index, even/odd, or an expression like 2n+4).

This code:

<p id="sentence">My fourth letter is awesome.</p>
#sentence:nth-letter(3) {
    color: red;font-family: "Comic Sans MS";
    font-size: 3em;
    font-weight: bold;

Results in this:

Whenever a final implementation lands, along with :nth-word() and the like, I guess we can say goodbye to lettering.js

Adobe WebKit Hackathon Summary →

Elsewhere , , ,

5 Responses to CSS :nth-letter()

  1. Do we have any updates on this? Still very interested.

  2. Nathan says:

    Adobe are? Do you mean Apple?

  3. mark says:

    its almost 2017 still not implemented. Up for this.

  4. Radu says:

    it’s 2018 and still not implemented

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.