Группировка выбранных элементов Сегодня разберем, как можно визуально группировать выбранные элементы. Если отметить несколько пунктов подряд, они "склеятся" в единый блок, потеряв скругления между собой. HTML: <div class="card"> <label><input type="checkbox">Первый элемент</label> <label><input type="checkbox" checked>Второй элемент</label> <label><input type="checkbox" checked>Третий элемент</label> <label><input type="checkbox">Четвертый элемент</label> </div> Каждый label содержит чекбокс и текст. Кликать можно по всей области строки. Базовое выделение: label:has(input:checked) { background: #d4f7d4; border-radius: 8px; } Каждый отмеченный label получает зелёный фон и скругление со всех четырёх сторон. Если выбран сосед сверху: label:has(input:checked) + label:has(input:checked) { border-top-left-radius: 0; border-top-right-radius: 0; } Если текущий label идёт сразу после другого выбранного label - убираем верхние скругления. Если выбран сосед снизу: label:has(input:checked):has(+ label input:checked) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } Если после текущего label идёт ещё один выбранный - убираем нижние скругления. В результате несколько выбранных элементов подряд выглядят как один цельный блок) Потестить код можно здесь.