In a surprising demonstration, web developers have shown that a non-existent CSS selector—::nth-letter—can be made to work through clever workarounds, reigniting the perennial debate over the language's limitations.
The trick, shared across several CodePen examples, relies on JavaScript and experimental CSS functions such as sibling-index() to mimic the effect of targeting individual letters. The demos include a text vortex scrolling effect and a direction-aware elastic hover, both of which would traditionally require extra markup.
“It’s child’s play,” said the developer behind one of the demonstrations, noting that even an eight-year-old could use the syntax if it existed natively. “We’ve been asking for ::nth-letter since 2003. This shows how simple it would be for browsers to implement.”
Background
The concept of a ::nth-letter selector has been discussed for over two decades. CSS has long supported ::first-letter for drop caps and other print effects, but a generic ::nth-letter() has never been added to any specification. In 2011, Chris Coyier proposed a hypothetical syntax that would allow styling odd and even letters differently with simple CSS.
The CSS Working Group has instead focused on the CSS Parser API, teased since 2017, which would let developers create custom styling languages. But that API has not materialized, leaving the community frustrated. “I think I’m done with reality,” one commenter quipped on a recent forum post about the state of CSS.
What This Means
The workaround proves that a native ::nth-letter selector could unlock creative typographic effects without relying on JavaScript or extra HTML spans. However, the current approach is not production-ready: it works only in Chrome and Safari due to the experimental sibling-index() function, and it hinges on brittle polyfills.
Philip Walton, a former Google engineer who tried to build CSS polyfills, warned that reliable polyfilling of fundamental selectors is nearly impossible. “It’s not possible to write a reliable polyfill for CSS,” he told colleagues, though he conceded that abandoned projects like his own “Polyphil” still work for basic cases.
Developers now urge the CSS Working Group to prioritize ::nth-letter in the next iteration of the spec. “We have the technology to do this,” said one voice in the community. “CSS needs to stop teasing us and deliver a selector that feels natural and powerful.”
For now, the demos remain a tantalising glimpse of what could be—a world where h1.fancy::nth-letter(even) { transform: skewY(15deg); } is not a dream, but everyday syntax.