I did not expect the of <selector> syntax to hit Baseline support this quickly. For years I have mentored developers who ran into the limits of nth-of-type. That selector is a blunt instrument because it only looks at the element tag. If you are working with a dynamic list where classes decide visibility, Modern CSS updates like the new :nth-child() syntax save a lot of pain in your codebase.
The selector logic we finally deserved
The :nth-child(n of selector) syntax lets you filter siblings before the index is applied. That is a big change from the old naive approach, where you would reach for heavy JavaScript just to style the second visible item in a filtered list. It also simplifies UI logic that used to need a messy mix of CSS and DOM manipulation.
/* The Naive/Old Way: Only works if all siblings are the same tag */
div:nth-of-type(2) {
background: #f0f0f0;
}
/* The Modern CSS way: Selects the 2nd element that specifically has the .intro class */
div:nth-child(2 of .intro) {
border: 2px solid #0073aa;
}If you want to know how these standards affect the WordPress ecosystem, see my write-up on Interop 2026 and WordPress safety. It is time to stop supporting browsers that hold our layouts back.
Flying focus and view transitions
Another useful part of Modern CSS updates is how we handle focus states. Chris Coyier recently explored “flying focus” using the View Transition API. You can now animate the focus ring between elements without writing a single line of state-heavy JavaScript. This is not just a shiny new toy; it is a real accessibility win, since it helps users track where they are on a page.
I have also seen developers overdo it. Motion should be conditional. Treating prefers-reduced-motion as a requirement, not a suggestion, keeps you from making users nauseous. Wrap your transition logic in a media query so the experience stays stable for everyone.
3D voxel scenes and performance bottlenecks
I recently came across Heerich.js, a tiny engine for 3D voxel scenes rendered as SVG. Because they are SVGs, you can style them directly with CSS variables. It is a handy workaround when you need 3D elements but do not want to load a heavy WebGL library. In my experience, a small bundle size is the best way to avoid performance bottlenecks in WooCommerce stores. On that note, I have written before about killing bloated JS for CSS calculations, which follows the same idea.
Browser support: Chrome 148 and Safari 26.5
The latest updates from Chrome 148 and Safari 26.5 are worth a look. Name-only container queries are now Baseline, but some features, like the at-rule() function for feature queries, still lack Firefox or Safari support. It is a classic gotcha. I have been burned before by shipping a standard that only worked on my machine. Check the flags, especially with the new range syntax in media queries.
If this Modern CSS updates work is eating up your dev hours, I can take it off your plate. I have been working with WordPress since the 4.x days.
Technical takeaway
Learning Modern CSS updates like scroll-driven animations and the of <selector> syntax makes your WordPress sites easier to maintain. Stop leaning on jQuery for simple UI states and use the platform instead. Debug the CSS, drop the legacy hacks, and ship cleaner code.
