Если совсем уж честно, то не на чистом CSS, в этом особого смысла нет. Клики всё-таки обрабатываются небольшим скриптом. Но пример в статье довольно компактный и даже, вроде как, доступный.
Основная магия спрятана здесь.
.isRangeSelected {
:nth-child(1 of :has(:checked)) ~ :not(:nth-child(2 of :has(:checked)) ~ li) {
background-color: rgb(228 239 253);
}
}
Селектор
:nth-child(N of .selector) позволяет выбирать подмножество в списке детей. Это открывает приятные возможности по стилизации сложных списков, WYSIWYG-текста и в прочих случаях. Например, вы можете стилизовать каждый второй параграф p в тексте, где между параграфами есть заголовки.В статье же интересный лакончиный пример того, как подсветить даты, которые расположены между двумя выбранными чекбоксами.
https://css-tricks.com/selecting-a-date-range-in-css/
