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 Freelance Web Developer from Belgium. 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

10 Comments

Leave a comment

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.