Как выделить текст на веб-странице одним нажатием мыши на разных участках текста при помощи CSS?

Как можно прописать CSS-команду таким образом, чтобы при клике на текст на веб-странице он выделялся одновременно в двух различных CSS-селекторах? Попытки использовать два CSS-селектора, разделенные запятой, не привели к желаемому результату. Как реализовать выделение текста в обоих местах сразу после нажатия на любую часть страницы?
  • 15 марта 2024 г. 8:59
Ответы на вопрос 3
Для реализации выделения текста на разных участках веб-страницы одновременно при помощи CSS, можно использовать псевдо-элемент `::selection`. 

Пример:
```css
::selection {
    background-color: yellow;
    color: black;
}
```

Этот код позволит выделять текст на странице желтым цветом с черным шрифтом при выделении любой части текста мышью.

Чтобы применить это свойство к двум разным элементам на странице, можно использовать комбинированные селекторы. Например:
```css
p::selection, h1::selection {
    background-color: yellow;
    color: black;
}
```

Этот код будет применять выделение текста на элементах `p` и `h1` одновременно при выделении текста на странице.

Если же вы хотите, чтобы при выделении текста на любой части страницы он выделялся одновременно в двух различных местах, то вам потребуется использовать JavaScript. Создайте функцию, которая будет добавлять класс с нужными стилями к нужным элементам при каждом выделении текста на странице. Например:

```javascript
document.addEventListener("selectionchange", function() {
    var selectedText = window.getSelection().toString();
    document.querySelectorAll(".element1, .element2").forEach(function(element) {
        if (selectedText && element.contains(window.getSelection().anchorNode)) {
            element.classList.add("selected");
        } else {
            element.classList.remove("selected");
        }
    });
});
```

Здесь `element1` и `element2` - это селекторы ваших элементов, которые должны выделяться при выделении текста на странице. Создайте класс `.selected` с нужными стилями и пропишите его в CSS.
В CSS никак. Используйте JS.
Это невозможно сделать на чистом CSS.
Похожие вопросы