css-nth-child.com

:nth-child and :nth-of-type recipes are pretty tough to get your head round, and once you do there's still the task of figuring out which one best suits your situation.

I built an interactive tool to try and simplify this process. There are a bunch of articles and a css-tricks tool which go some of the way towards explaining and visualising how the rules work, and helping you to select the right thing - but none of them give the user a totally open-ended playground in which to build their rules.

Start with the quick-start rules and then adjust, or build from scratch, effectively reverse engineering the rule from what you actually want to select.

I set out to create this project AI-first, "vibe-coding", I guess, to see how it felt. On the whole I found it to be a useful way of getting the grunt work setup work done and very quickly seeing my idea on screen, but beyond that the process felt very awkward and as though I was trying to explain my requirements to a remote developer, who kept forgetting what I'd asked for previously.

Eventually I took over and used the first quickly-generated code as my base, before improving the UX/UI and features available in the tool.