Псевдоэлемент ::selection: Тренажер CSS

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

В этой серии заданий вы попрактикуетесь в использовании псевдоэлемента `::selection`. Этот псевдоэлемент позволяет стилизовать ту часть документа, которую пользователь выделил (например, с помощью мыши или клавиатуры). Вы научитесь изменять цвет фона и текста выделенного фрагмента, применять стили к выделению внутри определенных элементов и комбинировать `::selection` с другими селекторами. Задания построены от простого изменения цвета до применения стилей к разным частям документа.

Список тем

Базовое выделение: Цвет фона

Измените стиль выделенного текста на всей странице так, чтобы его фон становился оранжевым (`orange`). Для этого вам нужно использовать псевдоэлемент, отвечающий за стилизацию выделения.

CSS

input1 {
  background-color: orange;
  color: white; /* Цвет текста оставлен для контраста */
}

                     input1 {
  background-color: orange;
  color: white; /* Цвет текста оставлен для контраста */
}

HTML

<p>Это пример текста для выделения.</p>
<p>Попробуйте выделить этот текст, чтобы увидеть результат.</p>
<div>Еще немного текста внутри другого блока.</div>

Используйте псевдоэлемент `::selection`. Внутри его правил укажите свойство `background-color` со значением `orange`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение цвета текста при выделении

Сделайте так, чтобы при выделении текста на странице его цвет менялся на белый (`white`), а фон оставался темно-синим (`darkblue`). Вам нужно добавить свойство для изменения цвета текста.

CSS

::selection {
  background-color: darkblue;
  input1: white;
}

                     ::selection {
  background-color: darkblue;
  input1: white;
}

HTML

<p>Выделите этот текст.</p>
<p>Цвет выделенного текста должен стать белым на темно-синем фоне.</p>

Внутри правил для псевдоэлемента `::selection` добавьте свойство `color` со значением `white`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выделение внутри конкретного элемента

Примените стиль выделения (фон `gold`, текст `black`) только к тексту внутри абзацев (`<p>`). Выделение текста вне абзацев должно оставаться стандартным.

CSS

input1 {
  background-color: gold;
  color: black;
}

                     input1 {
  background-color: gold;
  color: black;
}

HTML

<h1>Заголовок</h1>
<p>Выделите текст в этом абзаце. Он должен иметь золотой фон.</p>
<div>
  <span>Текст внутри span. Выделение здесь должно быть стандартным.</span>
</div>
<p>Еще один абзац для проверки выделения.</p>

Чтобы применить стиль `::selection` только к определенному элементу, укажите селектор этого элемента перед псевдоэлементом. Например: `p::selection`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные стили выделения для разных элементов

Установите разные стили выделения: для заголовков `<h1>` фон должен быть `darkred`, а цвет текста `white`. Для абзацев `<p>` фон должен быть `lightblue`, а цвет текста `black`.

CSS

input1 {
  background-color: darkred;
  color: white;
}

input2 {
  background-color: lightblue;
  color: black;
}

                     input1 {
  background-color: darkred;
  color: white;
}

input2 {
  background-color: lightblue;
  color: black;
}

HTML

<h1>Выделите этот заголовок</h1>
<p>Выделите этот абзац.</p>
<h2>Другой заголовок (стандартное выделение)</h2>
<p>Еще один абзац для проверки.</p>

Создайте два отдельных правила: одно для `h1::selection` и другое для `p::selection`, указав в каждом соответствующие цвета фона и текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сброс тени текста при выделении

В данном примере к тексту применена тень. Сделайте так, чтобы при выделении текста эта тень исчезала. Цвет фона и текста выделения установите на `teal` и `white` соответственно.

CSS

p {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  font-size: 18px;
}

::selection {
  background-color: teal;
  color: white;
  input1: none;
}

                     p {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  font-size: 18px;
}

::selection {
  background-color: teal;
  color: white;
  input1: none;
}

HTML

<p>Этот текст имеет тень.</p>
<p>Выделите его, и тень должна исчезнуть, а фон стать бирюзовым.</p>

Используйте свойство `text-shadow` со значением `none` внутри правила `::selection`, чтобы убрать тень у выделенного текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация с классом

Примените особый стиль выделения (фон `indigo`, текст `white`) только к тексту внутри элементов с классом `highlight`.

CSS

input1 {
  background-color: indigo;
  color: white;
}

                     input1 {
  background-color: indigo;
  color: white;
}

HTML

<p>Обычный текст для выделения.</p>
<div class="highlight">
  <p>Этот текст находится внутри элемента с классом 'highlight'.</p>
  <span>Выделите его, чтобы увидеть специальный стиль.</span>
</div>
<p>Еще обычный текст.</p>

Чтобы стилизовать выделение внутри элемента с определенным классом, используйте комбинацию селектора класса и псевдоэлемента `::selection`. Например: `.your-class::selection`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку