8 Reasons Why We're Still Begging for a CSS ::nth-Letter Selector

Introduction: Why CSS Still Feels Incomplete Without ::nth-letter

Every web designer has muttered a curse at CSS at least once. We've dreamed of a selector that lets us style individual letters—something like ::nth-letter. Since 2003, developers have asked for it, but CSS keeps teasing us with ::first-letter while refusing to offer the logical next step. The frustration even fueled buzz around frameworks like pretext.js as supposed "CSS killers." It's time to revisit why this missing selector matters and what we could do with it—if only the CSS specification would listen.

Below are eight key points that capture the longing, the demos, and the reality checks around this nonexistent but desperately needed feature.

1. A 20-Year Request for ::nth-letter

Since the early 2000s, web designers have pleaded for a pseudo-element that selects individual letters inside a text node. While ::first-letter lets us style the first character (drop caps, ornaments, etc.), ::nth-letter would unlock per‑letter styling at any position or pattern. This isn’t just a fancy toy—it’s a logical progression from existing selectors like ::nth-child and ::first-letter. The CSS Working Group has never added it, leaving developers to hack around with JavaScript, extra spans, and complex workarounds. The pain is real: every time we want a wavy word, a gradient across letters, or alternating colors, we wish for this selector.

2. Chris Coyier's 2011 Dream Demo

Back in 2011, Chris Coyier imagined a world where ::nth-letter existed. His hypothetical code looked like this:

h1.fancy::nth-letter(n) { display: inline-block; padding: 20px 10px; color: white; }

h1.fancy::nth-letter(even) { transform: skewY(15deg); background: #C97A7A; }

h1.fancy::nth-letter(odd) { transform: skewY(-15deg); background: #8B3F3F; }

This would create a zigzag, skewed-letter effect derived purely from CSS—no JavaScript, no DOM manipulation. The demo became a symbol of what could be, but it remains impossible with today's standard CSS. Developers still reference it as the holy grail of typographic control.

3. Interactive CodePen Using Invalid Syntax

Desperate to show the idea in action, developers have built CodePen demos that actually appear to work with ::nth-letter—using invalid syntax that browsers still render because of legacy parser behavior or polyfills. One such demo allows you to adjust skew, color, and padding on alternating letters. It looks like magic, but it's a fragile hack that breaks in any strict conformance mode. The demo is a teaser: it proves the concept is intuitive and desirable, yet it cannot be trusted in production. You can explore the interactive version here (though it's not valid CSS, it's still fun).

4. A Child Can Use This Non-Existent Selector

The author's eight-year-old produced a video demo showing how natural ::nth-letter feels. The child typed the pseudo‑element and instantly saw alternating letters transform. Imagine a tool so intuitive that a child can learn it in seconds. Today, achieving the same effect requires wrapping each letter in a <span> and writing JavaScript loops. The video is a poignant reminder that ::nth-letter would lower the barrier for creative typography, making CSS more accessible to beginners and professionals alike.

5. Migrating a Text Vortex: Less JavaScript

One practical demo: a text vortex scrolling effect that currently relies on JavaScript to rotate each letter individually. With ::nth-letter, the same effect could be written as pure CSS, shrinking code and improving performance. The author shows a Chrome/Safari demo that uses the new sibling-index() function (an experimental feature). Even this limited approach hints at the power of native letter-level selection. If ::nth-letter existed, the entire JavaScript file could be deleted, leaving only a few lines of declarative CSS.

6. Sleeker Elastic Hover Effects

Temani Afif's direction-aware elastic hover effect currently requires a <span> around every letter to enable per‑letter hover animation. With ::nth-letter, the markup stays clean—just a plain text node—while the CSS handles the splitted animation. The author demonstrates a CodePen where ::nth-letter(even) bounces differently than odd letters. This not only reduces HTML bloat but also makes the effect easier to maintain and reuse. It's a classic case of CSS improving semantics: the presentation layer should not dictate DOM structure.

7. The Fantasy of Upgrading All Typography Demos

Imagine a crusade: going through every typography demo on the web and converting them to ::nth-letter. No more JavaScript‑generated spans, no more backend letter‑splitting hacks. Gradients on words, wavy titles, falling‑letter animations—all achievable with a single selector. The author admits it's a fantasy, but it highlights how much cleaner the web would be. The current state forces developers to choose between performance penalties or messy DOM. A native selector would change the game.

8. The Impossibility of Reliable Polyfills (Yet)

Philip Walton at Google spent years trying to create a production‑ready CSS polyfill. He concluded it's impossible to reliably polyfill ::nth-letter because CSS selectors operate at the rendering engine level—polyfills can only approximate behavior by manipulating the DOM, which leads to performance hits, layout shifts, and edge cases. The abandoned framework he left behind, though still functional for simple demos, is not a solution for real websites. This technical limitation is why ::nth-letter remains a dream: until the CSS Working Group adopts it, we're stuck with hacks.

Conclusion: Hope on the Horizon?

The desire for ::nth-letter is more than a geeky whim—it's a reflection of CSS's evolution. Every year, more developers ask for it, and browser vendors sometimes experiment with related features like sibling-index(). Perhaps in CSS4 or CSS5, we'll finally get this selector. Until then, we'll keep using JavaScript, extra spans, and polyfills that break in the next browser update. The protests from designers, the impossible demos, and the pleas of a child all underscore one thing: ::nth-letter is not a luxury, it's a necessity for truly expressive Web typography.