My nth-child selector broke at 47 items, client feedback fixed it

I had a mega menu using nth-child rules that worked perfectly until the client added item 47 and everything shifted into a weird 3 column grid. They just said 'looks broken on my screen' and I spent 3 hours realizing I should have used :has() with data attributes instead, way more scalable for dynamic lists. Anyone else hit that invisible limit where a clever trick stops scaling?

1 comments

1 Comment

sullivan.john1d ago

The 47-item thing is basically the same trap I hit with a product filter that maxed out at 20 items, took me a whole day to realize I could just count the children with JS and apply a class. Once you switch to data attributes it feels stupidly obvious, but you never think about it until some random number breaks everything.