Как выделить диапазон дат в календаре на чистом CSS, без JavaScript. Разбираем селектор :nth-child(of S), реактивный CSS на custom properties, математику с clamp() и современный Range Syntax в стилевых запросах. Новый :nth-child(of S) не умеет выбирать элементы из всего документа — он работает только с соседями внутри одного родителя. Для задачи подсветки диапазона дат в календаре это почти бесполезно. Смотрим, почему документация создаёт ложные ожидания, и как всё-таки собрать рабочее решение на CSS. В этом выпуске: - Постановка задачи: календарь и почему обычный :nth-child() не спасает - Что на самом деле умеет :nth-child(of S) и откуда берётся разочарование - Реактивный CSS: передаём данные через custom properties и строим условия - Бинарная логика через clamp(): получаем 0 и 1 для попадания в диапазон - Полностью рабочее решение без JavaScript, которое поддерживается во всех современных браузерах - Современный CSS: Range Syntax в стилевых запросах - Как это меняет подход к CSS и упрощает сложные интерфейсы Этот выпуск про то, как CSS меняется, почему новые фичи не всегда ведут себя так, как мы от них ждём, и как из ограничений всё равно собрать элегантное решение. Иногда CSS удивляет не тем, что обещает, а тем, что в итоге умеет. Демонстрация → https://htmlacademy.ru/demos/249 Канал в Телеграм → https://t.me/cssbol Таймкоды: 00:00 Введение и проблема 00:57 Описание задачи 01:51 Проблемы с селектором child 03:34 Разочарование в childFS 06:20 Предложение нового подхода 07:11 Реализация решения 08:07 Математическая логика и функция clamp 11:21 Пересечение диапазонов 11:57 Проверка результата 12:27 Диапазон с одинаковыми значениями 13:08 Ограничения текущего подхода 14:18 Современные возможности CSS 15:09 Сложные сравнения в CSS 17:00 Перспективы и выводы #css #frontend #webdevelopment