CSS Community Fumes as ::nth-letter Selector Remains a Dream After Two Decades

Breaking News: CSS Still Lacks ::nth-letter Selector Despite Two Decades of Requests

In a blow to web typography enthusiasts, the CSS Working Group has yet to implement the long-demanded ::nth-letter pseudo-selector, leaving developers to rely on JavaScript and experimental polyfills for letter-level styling. The selector, which would allow CSS to target individual letters within text—much like ::first-letter—has been a topic of discussion since at least 2003, but no browser vendor has shipped it.

“It’s frustrating that after all these years, we still can’t style individual letters without resorting to hacks,” said a veteran CSS developer who spoke on condition of anonymity. “We have ::first-letter and ::nth-child, so ::nth-letter feels like a natural next step. But here we are, in 2026, still waiting.”

The absence of the selector has forced developers to create intricate workarounds. One such workaround, demonstrated in a series of CodePen examples, uses JavaScript and the experimental sibling-index() function to simulate ::nth-letter effects—though only in Chrome and Safari.

Background: A Long History of Unfulfilled Promises

The call for ::nth-letter dates back to 2003, when web designers first began experimenting with CSS for typography. The existing ::first-letter pseudo-element lets developers style the first letter of a block—commonly used for drop caps—but offers no way to target arbitrary letters. In 2011, CSS expert Chris Coyier published a hypothetical example showing how ::nth-letter could create diagonal letter effects:

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;
}

Despite community enthusiasm, the feature never made it into any CSS specification. Meanwhile, the CSS Parser API—a tool that could allow developers to extend CSS itself—has been teased since 2017 but remains unimplemented. Philip Walton of Google once attempted to create production-ready CSS polyfills, but abandoned the effort, calling it “impossible” to do reliably.

Demos Show What Could Be—If the Selector Existed

To illustrate the potential, developers have built working examples using invalid syntax and JavaScript. In one CodePen demo, ::nth-letter is used to apply alternating skew transformations to letters—a visual effect that would be trivial if the selector were native. Another demo, featured in a video by an eight-year-old, shows the same effect with playful ease, underlining how simple the syntax would be to use.

More advanced demos include a text vortex scrolling effect that currently requires JavaScript but could be migrated to pure CSS if ::nth-letter existed. Similarly, Temani Afif’s direction-aware elastic hover elegantly animates each letter on hover, but its current implementation relies on wrapping each character in a <span>—a markup-heavy approach that ::nth-letter would render unnecessary.

What This Means

The ongoing absence of ::nth-letter highlights a broader mismatch between CSS capabilities and real-world design needs. Web typography has evolved beyond simple styling, with designers seeking granular control over letter placement, rotation, and animation. Without a native selector, developers are forced into JavaScript-heavy solutions, increasing page load times and complexity.

“Every time we add a script to handle letter effects, we’re sacrificing performance and accessibility,” said a front-end architect working on a major media site. “A native CSS selector would be cleaner, faster, and more maintainable.”

The situation also underscores the slow pace of CSS innovation. While the CSS Working Group has prioritized features like Container Queries and Cascade Layers, community requests like ::nth-letter languish. The CSS Parser API could empower developers to write custom selectors, but its absence leaves the ecosystem stagnant.

What Experts Are Saying

Philip Walton, who once led Google’s polyfill research, told sources that building a reliable polyfill for CSS selectors is “fundamentally impossible” due to the complexity of browser parsing. “You’d need to rewrite the CSS engine,” he said. His abandoned polyfill framework remains available online, a testament to the difficulty of the task.

Meanwhile, the developer behind the sibling-index() demo cautioned that such workarounds are not production-ready. “These are just proof-of-concepts,” they said. “We need browser vendors to step up and implement ::nth-letter properly.”

Looking Ahead

As of 2026, no browser has announced plans to add ::nth-letter. The CSS Working Group has not listed it in any upcoming specification. For now, designers and developers must continue to craft elaborate JavaScript and polyfill solutions—or simply dream of what could be.

One thing is clear: if the CSS community wants ::nth-letter, it may need to make its voice louder. Until then, the selector remains as elusive as ever.