You wrote :nth-child(3n + 5) in a stylesheet. Now a design token says it should be every fourth item from the second. So you edit the selector. Then the selector in the media query. Then the one in the component variant.

The An + B numbers live inside the selector, and a selector can't read a custom property. That's the itch Temani Afif scratches in a new CSS-Tricks article. He rebuilds the :nth-child() patterns as value-level logic, using sibling-index() , the if() function with style() queries, and mod() . Once the numbers are custom properties, you can change them from anywhere the cascade reaches.

From selector to condition

Every example in the article uses the same markup: a .container with a run of plain div children. Nothing to see there. The interesting part is where the logic moves.

sibling-index() gives an element its position among its siblings as a number. Feed that number to a style() query inside if() and you get a per-element condition that sits in the declaration, not the selector.…