Вам нужно использовать JavaScript для того, чтобы добавлять и удалять класс у документа в зависимости от наличия класса `.selected` у элементов на странице. Вот пример, как это можно сделать:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример</title>
<style>
.highlighted {
background-color: yellow;
}
.selected {
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="item" onclick="toggleSelect(this)">Элемент 1</div>
<div class="item" onclick="toggleSelect(this)">Элемент 2</div>
<div class="item" onclick="toggleSelect(this)">Элемент 3</div>
<script>
function toggleSelect(el) {
// Переключаем класс .selected у элемента
el.classList.toggle('selected');
// Проверяем наличие класса .selected у элементов
if (document.querySelector('.item.selected')) {
// Если хотя бы один элемент имеет класс .selected, добавляем класс к документу
document.body.classList.add('highlighted');
} else {
// Если ни один элемент не имеет класс .selected, удаляем класс у документа
document.body.classList.remove('highlighted');
}
}
</script>
</body>
</html>
```
### Объяснение кода:
1. **HTML-разметка**: У нас есть несколько элементов (например, `div`), на которые можно кликнуть. При клике будет вызываться функция `toggleSelect`.
2. **Функция `toggleSelect(el)`**:
- При получении элемента `el` (текущего элемента, по которому произошел клик) функция переключает класс `.selected` для этого элемента с помощью `classList.toggle()`.
- Затем мы используем `document.querySelector('.item.selected')`, чтобы проверить, существует ли хотя бы один элемент с классом `.selected`.
- Если хотя бы один элемент с классом `.selected` найден, мы добавляем класс `.highlighted` к `document.body`.
- Если ни одного элемента с классом `.selected` нет, то класс `.highlighted` убирается из `document.body`.
Этот подход позволяет динамически управлять классами документа в зависимости от состояния элементов на странице.