A tutorial demonstrating how to build a CSS-driven date range selector using the `:nth-child(n of selector)` syntax. The approach uses checkboxes for state and CSS selectors to handle both the range highlighting and the JavaScript logic for managing which dates are selected. The key insight is that `:nth-child(2 of :has(:checked))` lets you target checked elements by their position among checked siblings, simplifying both the JS range-adjustment logic and the CSS range styling to just a few lines.

5m read timeFrom css-tricks.com
Post cover image
Table of contents
The “n of selector” syntaxThe LayoutChoose Only Two DatesStyling the Range
10 Comments

Sort: