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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


Leave a comment

Leave a Reply to Sorlia Cancel 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.