This is pretty interesting. Solid.js just released a big update for SolidStart, which is their fullstack metaframework like Next.js.
They split out the router logic to a separate package to be router agnostic, but you can still use server-side loader functions to prepare data for the route.
The clientOnly wrapper to declare some code as client side only looks really simple. Easier than putting 'use client' everywhere in Next.js modules.
Short explanation: There is :nth-child() and :nth-of-type().
:nth-child() counts every element.
:nth-of-type() counts every specific element. For example the structure might be:
<header />
<div />
<div class="card" />
<div />
<div class="card" />
<footer />
div:nth-child(2) will target the first <div>.
div:nth-of-type(2) will target the second div (the first with the class .card).
The problem? "of-type" means just the HTML element. so .card:nth-of-type(2) will still select the second div and therefore the first with the class .card.
The pseudo selector from the link allows me to target the second card. With :nth-child(2 of .card) I can select the fourth div and therefore the second one with the class .card. This is really a game changer.
Here’s a really meaningful piece from Stephanie Eckles about balancing CSS versatility with reliability. It’s a great foundation for folks newer to CSS and a valuable refinement for the pros. If you write CSS, you’ll want to read it.