Есть ли способ редактировать отдельные экземпляры класса в CSS?
Я пытаюсь оформить календарь в CSS и хочу, чтобы одно событие постоянно охватывало дни, на которые запланировано событие, а не разбивалось по отдельности. Я свободно владею CSS, но я изо всех сил пытаюсь понять, как отредактировать это, чтобы, например, «Событие № 1» не имело разрывов между днями, а вместо этого представляло собой одну непрерывную черную линию до последнего дня. где он полный.
Это то, что я пытаюсь сделать.
Мой текущий код выглядит так, а это живая ссылка на сайт (это второй раздел сайта)
<table class = "spiffy calendar-table bigcal spiffy-weekly">
<tbody>
<tr class = "calendar-heading">
<td colspan = "7" class = "calendar-date-switcher">
<table class = "calendar-heading-tbl">
<tbody>
<tr>
<td class = "calendar-prev"><a rel = "nofollow" onclick = "sessionStorage.scrollTop = jQuery(window).scrollTop();" href = "/?preview_id=17&preview_nonce=f0919fcc84&_thumbnail_id=-1&preview=true&daynum=06&month=dec&yr=2020"><</a>
</td>
<td class = "calendar-month">December 2020</td>
<td class = "calendar-next"><a rel = "nofollow" onclick = "sessionStorage.scrollTop = jQuery(window).scrollTop();" href = "/?preview_id=17&preview_nonce=f0919fcc84&_thumbnail_id=-1&preview=true&daynum=14&month=dec&yr=2020">></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class = "weekday-titles">
<td class = "normal-day-heading">Monday</td>
<td class = "normal-day-heading">Tuesday</td>
<td class = "normal-day-heading">Wednesday</td>
<td class = "normal-day-heading">Thursday</td>
<td class = "normal-day-heading">Friday</td>
<td class = "weekend-heading">Saturday</td>
<td class = "weekend-heading">Sunday</td>
</tr>
<tr>
<td class = "spiffy-day-07 no-events day-with-date"><span class = "day-number">07</span><span class = "event"></span>
</td>
<td class = "spiffy-day-08 no-events day-with-date"><span class = "day-number">08</span><span class = "event"></span>
</td>
<td class = "spiffy-day-09 day-with-date"><span class = "day-number">09</span><span class = "event"><span class = "calnk category_1 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#000000;"><span class = "calnk-box"><a href = "https://link.com" style = "color: #FFFFFF; background:#000000;" target = "_blank"><span class = "spiffy-title">Event #1</span>
</a><span class = "spiffy-popup" style = "color:#000000;"><a href = "https://link.com" target = "_blank"><span class = "event-title" style = "color:#000000;">Event #1</span><span class = "event-title-break"></span><span class = "ca-desc-p">Event description</span>
</a><span class = "ca-location-p">Event location</span>
</span>
</span>
</span>
</span>
</span>
</td>
<td class = "spiffy-day-10 day-with-date"><span class = "day-number">10</span><span class = "event"><span class = "calnk category_1 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#000000;"><span class = "calnk-box"><a href = "https://link.com" style = "color: #FFFFFF; background:#000000;" target = "_blank"><span class = "spiffy-title">Event #1</span>
</a><span class = "spiffy-popup" style = "color:#000000;"><a href = "https://link.com" target = "_blank"><span class = "event-title" style = "color:#000000;">Event #1</span><span class = "event-title-break"></span><span class = "ca-desc-p">Event description</span>
</a><span class = "ca-location-p">Event location</span>
</span>
</span>
</span>
</span>
<span class = "calnk category_2 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#6d6d6d;"><span class = "calnk-box"><span class = "spiffy-title">Tornament</span><span class = "spiffy-popup" style = "color:#6d6d6d;"><span class = "event-title" style = "color:#6d6d6d;">Tornament</span>
<span class = "event-title-break"></span><span class = "ca-desc-p">Tournament description</span>
<span class = "ca-location-p">Tournament description</span>
</span>
</span>
</span>
</span>
</span>
</td>
<td class = "spiffy-day-11 day-with-date"><span class = "day-number">11</span><span class = "event"><span class = "calnk category_1 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#000000;"><span class = "calnk-box"><a href = "https://link.com" style = "color: #FFFFFF; background:#000000;" target = "_blank"><span class = "spiffy-title">Event #1</span>
</a><span class = "spiffy-popup" style = "color:#000000;"><a href = "https://link.com" target = "_blank"><span class = "event-title" style = "color:#000000;">Event #1</span><span class = "event-title-break"></span><span class = "ca-desc-p">Event description</span>
</a><span class = "ca-location-p">Event location</span>
</span>
</span>
</span>
</span>
<span class = "calnk category_2 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#6d6d6d;"><span class = "calnk-box"><span class = "spiffy-title">Tornament</span><span class = "spiffy-popup" style = "color:#6d6d6d;"><span class = "event-title" style = "color:#6d6d6d;">Tornament</span>
<span class = "event-title-break"></span><span class = "ca-desc-p">Tournament description</span>
<span class = "ca-location-p">Tournament description</span>
</span>
</span>
</span>
</span>
</span>
</td>
<td class = "spiffy-day-12 weekend day-with-date"><span class = "day-number weekend">12</span><span class = "event"><span class = "calnk category_1 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#000000;"><span class = "calnk-box"><a href = "https://link.com" style = "color: #FFFFFF; background:#000000;" target = "_blank"><span class = "spiffy-title">Event #1</span>
</a><span class = "spiffy-popup" style = "color:#000000;"><a href = "https://link.com" target = "_blank"><span class = "event-title" style = "color:#000000;">Event #1</span><span class = "event-title-break"></span><span class = "ca-desc-p">Event description</span>
</a><span class = "ca-location-p">Event location</span>
</span>
</span>
</span>
</span>
<span class = "calnk category_2 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#6d6d6d;"><span class = "calnk-box"><span class = "spiffy-title">Tornament</span><span class = "spiffy-popup" style = "color:#6d6d6d;"><span class = "event-title" style = "color:#6d6d6d;">Tornament</span>
<span class = "event-title-break"></span><span class = "ca-desc-p">Tournament description</span>
<span class = "ca-location-p">Tournament description</span>
</span>
</span>
</span>
</span>
</span>
</td>
<td class = "spiffy-day-13 current-day weekend day-with-date"><span class = "day-number weekend">13</span><span class = "event"><span class = "calnk category_1 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#000000;"><span class = "calnk-box"><a href = "https://link.com" style = "color: #FFFFFF; background:#000000;" target = "_blank"><span class = "spiffy-title">Event #1</span>
</a><span class = "spiffy-popup" style = "color:#000000;"><a href = "https://link.com" target = "_blank"><span class = "event-title" style = "color:#000000;">Event #1</span><span class = "event-title-break"></span><span class = "ca-desc-p">Event description</span>
</a><span class = "ca-location-p">Event location</span>
</span>
</span>
</span>
</span>
<span class = "calnk category_2 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#6d6d6d;"><span class = "calnk-box"><span class = "spiffy-title">Tornament</span><span class = "spiffy-popup" style = "color:#6d6d6d;"><span class = "event-title" style = "color:#6d6d6d;">Tornament</span>
<span class = "event-title-break"></span><span class = "ca-desc-p">Tournament description</span>
<span class = "ca-location-p">Tournament description</span>
</span>
</span>
</span>
</span>
<span class = "calnk category_3 category-bg"><span onclick = "" class = "calnk-link" style = "color: #FFFFFF; background:#dd3333;"><span class = "calnk-box"><span class = "spiffy-title">Show #1</span><span class = "spiffy-popup" style = "color:#dd3333;"><span class = "event-title" style = "color:#dd3333;">Show #1</span>
<span class = "event-title-break"></span>
</span>
</span>
</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>```
@sergeykuznetsov как ты это сделал!? да, это необходимо с точки зрения UX
—
13.12.2020 19:52
Хорошо. Сейчас напишу развернутый ответ.
—
13.12.2020 20:37
Можете ли вы сейчас создать класс для этого тега tr? - (ibb.co/kDDx4xC) Иначе при обращении к тегам будет очень длинный селектор.
—
13.12.2020 20:42
@sergeykuznetsov да, я могу добавить через javascript
—
13.12.2020 21:44
@sergeykuznetsov на самом деле неважно, нет, я не могу. длинные селекторы в порядке
—
13.12.2020 21:53
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
6
50
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Невозможно выбрать n-й элемент по классу. Вам придется использовать что-то вроде
.weekParent div:first-of-type{}
.weekParent div:last-of-type{}
или
.weekParent div:nth-of-type(2){}
Ответ принят как подходящий
Так...
Для того, чтобы получить эффект сплошной линии событий, вам нужно добавить этот селектор:
.wpb_wrapper table tbody tr:nth-child(3) td:not(.no-events) .calnk.category_1 {
margin-left: -3px;
margin-right: -3px;
}
margin-left и margin-right расширят поля до нужной ширины, где мне будет достаточно 3 пикселей.
Этот селектор устанавливает заданные правила для всех .calnk.category_1, с учетом исключения класса .no-events, тэга td.
Если вам нужно сделать эффект сплошной полосы для всех линий, то исключите из селектора класс .category_1. Это должно выглядеть так:
.wpb_wrapper table tbody tr:nth-child(3) td:not(.no-events) .calnk { ... }
На этом этапе решается основа проблемы. Но также потребуется корректировка первого и последнего блока. Это можно сделать с помощью псевдоклассов first-of-type и last-of-type. А вот с этим, я думаю, вы легко справитесь :)
Другие вопросы по теме
Увеличьте высоту дочернего div до высоты его родительского div
Как заставить это изображение выровняться по центру только с помощью CSS?
Bootstrap блок со 100% высотой
Программирование "Live-Coder"
Увеличьте высоту относительного <div>, чтобы соответствовать абсолютной высоте дочерних элементов <div>
Проблема с вложенной встроенной сеткой CSS Grid
Коробка, которая раскрывается в галерее
Как я могу добавить шрифт Hinglish в HTML?
Форма оверлея Bootstrap spinner (не вся страница)
Как сделать переход более плавным при наведении курсора на кнопку №2
Похожие вопросы
Как закрыть окно pywebview из javascript с помощью pywebview api
Увеличьте высоту дочернего div до высоты его родительского div
Как избавиться от тысяч строк
Вернуть HTML-страницу с Spring Controller
Превью pdf в iframe не скачивать
Как заставить это изображение выровняться по центру только с помощью CSS?
Django: прокрутите изображения, чтобы показать по одному на странице
Bootstrap блок со 100% высотой
Программирование "Live-Coder"
Увеличьте высоту относительного <div>, чтобы соответствовать абсолютной высоте дочерних элементов <div>
Я сделал это в css. Так ли это необходимо? - ibb.co/dM6Sh85