Range selection patterns for CSS calendars

tech news
1

A clever CSS-Tricks piece showing how the newer :nth-child() “n of selector” syntax can handle date-range selection on a calendar with surprisingly little JavaScript.

Here’s the visual that shows how CSS can do date-range selection without quite losing its dignity.

s7B1698CD93D2E480B2867F02F52F6807BC326B3FB6B9C5A5A10103D5813DD8E01774012344907date-selection
s7B1698CD93D2E480B2867F02F52F6807BC326B3FB6B9C5A5A10103D5813DD8E01774012344907date-selection1200×600 47.2 KB

Arthur

2

This is a nice pattern, but I’d still add a small JS fallback that just toggles . is-start/. is-end/. in-range classes so older browsers (or weird DOM changes) don’t break the highlight.

BobaMilk