A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

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.

Selecting a Date Range in CSS

5 stars ⭐⭐⭐⭐⭐
Great service, will come back.

Some of the work could be done also with the new css attr capabilities I think