Восхитительный Range Syntax в CSS

[bakhirev]

.day-now:nth-child(n+5):nth-child(-n+12) {
background: red;
}

[AlexPershin]

А как быть с диапазоном дней, который попадает в разные ряды таблицы?

[bakhirev]

на верстке я тоже сэкономил, и заверстал все в одном контейнере

[AlexPershin]

Вот тут и начинается развлекуха – "А давайте вместо нормальной таблицы будем имитировать её плоской списочной структурой"

Но даже после замены таблицы плоским списком тегов остаются вопросы:
- А как удобно менять диапазоны дат? Селекторы с помощью JS ведь нельзя менять. - Как правильно вычислять коэффициенты внутри nth-child? Ведь надо ещё учитывать сдвиг первого числа месяца, когда первое число не попадает на понедельник.

И вы уверены, что вам за такую вёрстку ваш JS-разработчик потом скажет спасибо? =)

[deamondz]

чем плоха плоская списочная структура? a11y?

[AlexPershin]

полностью теряется важная сущность — неделя, остаётся просто плоский список дней месяца

[mityukov]

Таблица нужна для семантики, где именно идут табличные данные какие-то, столбцы, строки, где это действительно важно. Для всего остального есть grid. В месяце 30 дней, которые идут один за другим. На недели мы их делим чисто для удобства и компактности отображения. Если это не "представление", то я хз, если честно. Здесь плоский список и должен быть, как по мне.

[AlexPershin]

ну поживите без выходных и радостного ожидания пятницы, а потом обсудим ваш опыт =)

[mityukov]

Мне гораздо удобнее, когда разбито на недели, безусловно. Но к функционалу "date range picker" это никакого отношения не имеет. Если только там нет бизнес-правил, типа: "нельзя выбирать субботы и воскресенья". Но и это удобнее реализовать просто проверяя день недели каждого из дней в "плоском списке", чем оформлять неделю как дополнительный уровень в иерархии.

Но это все про представление. Тут нет табличной семантики, типа, в первом столбце у нас имена, во втором дни рождения и тп. Просто список дней с "переносом строки" перед каждым понедельником и другими удобными для конечного пользователя оформлениями :)

[AlexPershin]

Так я выше задал два вопроса к решению на селекторе:

1) как в этом решении удобно двигать даты диапазона? селектор — штука статичная. сидеть генерить цсс правила и перезаписывать их в каком-то спецтеге стайл. не перебор ли?

2) как все эти смещения высчитывать внтри nth-child?

Понятно, что когда есть задача — выделить статичный диапазон — там и селектором можно. А если задача — сделать удобное апи для динамического изменения диапазона, то вряд ли селекторы будут хороши. А вот CSS-логика выглядит и простой, и удобной

[dom1n1k]

Плюсую, сплошной список в гриде выглядит и практичнее, и логичнее.
Логичнее, потому что время это и есть континуум, а неделя - это просто форма представления (даже одна из) и в разных странах она начинается с разных дней. А ещё в некоторых календарях недели ориентируют вертикально.

А вот как раз выбор и подсветка каких-то дней - это наоборот больше похоже на семантику и бизнес-логику. И я не уверен, что тут так уж необходимо pure css решение.

[ImagineTables]

Да, приходится специально инлайнить стили, но это делается один раз при генерации шаблона.

А нельзя:

1. Совать день в атрибут, рендерить через content и инициализировать переменную через attr()?

2. Использовать sibling-index() (возможно, скрывая ненужное)?