Вопрос по css как выделить текст одним кликом в разных местах?

от
prokoding.ru > CSS > Вопрос по css как выделить текст одним кликом в разных местах?

Для выделения текста одним кликом в разных местах в CSS вам понадобится использовать псевдо-элементы и немного JavaScript. Давайте создадим простой пример.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Text</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="selectable" class="selectable">
  <span class="selectable-text">Выделите</span>
  <span class="selectable-text">этот</span>
  <span class="selectable-text">текст</span>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.selectable {
  user-select: none; /* Отключаем стандартное выделение текста */
  cursor: pointer;
}

.selectable-text::selection {
  background-color: #ffcc00; /* Цвет выделения */
}

JavaScript (script.js):

document.querySelectorAll('.selectable-text').forEach(item => {
  item.addEventListener('click', () => {
    const range = document.createRange();
    range.selectNodeContents(item);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  });
});

В этом примере мы создаем три спана с текстом внутри div с классом "selectable". С помощью CSS мы отключаем стандартное выделение текста и устанавливаем желаемый цвет для выделения текста. Затем с помощью JavaScript мы добавляем слушателя события "click" для каждого спана, чтобы при клике на него весь текст внутри него выделялся.

Таким образом, при клике на каждом спане текст внутри него будет выделяться одним кликом.