Комбинирование псевдоклассов и псевдоэлементов: Тренажер CSS

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

Эта серия заданий поможет вам отточить навыки использования псевдоклассов и псевдоэлементов CSS в комбинации друг с другом. Вы будете работать с готовыми HTML-структурами и CSS-стилями, в которых пропущены ключевые части селекторов. Ваша задача — заполнить эти пропуски, чтобы добиться нужного визуального эффекта. Задания построены по принципу 'от простого к сложному' и охватывают различные сценарии, где совместное применение псевдоклассов и псевдоэлементов позволяет создавать интересные и динамичные интерфейсы без использования JavaScript. Вы научитесь стилизовать элементы в зависимости от их состояния (например, :hover, :focus, :checked) и положения в документе (:nth-child, :first-child), одновременно воздействуя на их псевдоэлементы (::before, ::after, ::first-letter, ::marker).

Список тем

Эффект при наведении на элемент списка

Добавьте CSS-правило, чтобы при наведении курсора на любой элемент списка (тег `<li>`) перед его текстом появлялся символ '➤'. Используйте комбинацию псевдокласса состояния и псевдоэлемента.

CSS

ul {
  list-style: none;
  padding-left: 20px;
}

li {
  padding: 5px 0;
  position: relative;
  cursor: pointer;
}

/* Допишите селектор ниже */
input1 {
  content: "➤ ";
  color: green;
  font-weight: bold;
  margin-right: 5px;
}

                     ul {
  list-style: none;
  padding-left: 20px;
}

li {
  padding: 5px 0;
  position: relative;
  cursor: pointer;
}

/* Допишите селектор ниже */
input1 {
  content: "➤ ";
  color: green;
  font-weight: bold;
  margin-right: 5px;
}

HTML

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
  <li>Элемент списка 4</li>
</ul>

Вам нужно выбрать все элементы `<li>`. Затем используйте псевдокласс `:hover` для отслеживания наведения мыши. Чтобы добавить символ перед текстом, используйте псевдоэлемент `::before`. Скомбинируйте их в одном селекторе (`li:hover::before`) и задайте нужное свойство `content`.

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

Результат

Сообщения

Выполнить

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

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

Выделение первой буквы первого абзаца

Сделайте так, чтобы первая буква самого первого абзаца (`<p>`) на странице была увеличена и выделена цветом. Используйте комбинацию псевдокласса для выбора первого дочернего элемента и псевдоэлемента для стилизации первой буквы.

CSS

p {
  line-height: 1.6;
  color: #333;
}

/* Допишите селектор ниже */
input1 {
  font-size: 2em; /* Размер не меняем */
  color: tomato; /* Цвет не меняем */
  font-weight: bold;
  float: left;
  margin-right: 4px;
  line-height: 1;
}

                     p {
  line-height: 1.6;
  color: #333;
}

/* Допишите селектор ниже */
input1 {
  font-size: 2em; /* Размер не меняем */
  color: tomato; /* Цвет не меняем */
  font-weight: bold;
  float: left;
  margin-right: 4px;
  line-height: 1;
}

HTML

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

Сначала выберите первый абзац с помощью псевдокласса `:first-child`. Затем, чтобы стилизовать его первую букву, примените псевдоэлемент `::first-letter`. Объедините их в селекторе (`p:first-child::first-letter`).

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

Результат

Сообщения

Выполнить

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

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

Стилизация маркеров четных элементов списка

Измените стандартный маркер у четных элементов нумерованного списка (`<ol>`) на символ '✔'. Используйте комбинацию псевдокласса для выбора четных элементов и псевдоэлемента для стилизации маркера.

CSS

ol {
  padding-left: 40px;
}

li {
  padding: 3px 0;
}

/* Допишите селектор ниже */
input1 {
  content: "✔ ";
  color: darkcyan;
  font-size: 1.1em;
}

                     ol {
  padding-left: 40px;
}

li {
  padding: 3px 0;
}

/* Допишите селектор ниже */
input1 {
  content: "✔ ";
  color: darkcyan;
  font-size: 1.1em;
}

HTML

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
  <li>Четвертый пункт</li>
  <li>Пятый пункт</li>
</ol>

Выберите элементы списка `<li>`. Используйте псевдокласс `:nth-child(even)` для выбора только четных элементов. Затем примените псевдоэлемент `::marker` для доступа к маркеру списка. Скомбинируйте их (`li:nth-child(even)::marker`) и задайте свойство `content`.

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

Результат

Сообщения

Выполнить

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

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

Индикация выбранного чекбокса

Добавьте визуальный индикатор (зеленую галочку) после текста метки (`<label>`), когда соответствующий ей чекбокс (`<input type="checkbox">`) выбран. Используйте псевдокласс состояния чекбокса и псевдоэлемент для добавления контента к соседней метке.

CSS

div {
  margin-bottom: 10px;
}

label {
  margin-left: 5px;
  position: relative;
}

/* Допишите селектор ниже */
input1 {
  content: " ✔";
  color: green;
  font-weight: bold;
  margin-left: 5px;
}

                     div {
  margin-bottom: 10px;
}

label {
  margin-left: 5px;
  position: relative;
}

/* Допишите селектор ниже */
input1 {
  content: " ✔";
  color: green;
  font-weight: bold;
  margin-left: 5px;
}

HTML

<div>
  <input type="checkbox" id="option1">
  <label for="option1">Опция 1</label>
</div>
<div>
  <input type="checkbox" id="option2">
  <label for="option2">Опция 2</label>
</div>
<div>
  <input type="checkbox" id="option3">
  <label for="option3">Опция 3</label>
</div>

Нужно отследить состояние чекбокса с помощью псевдокласса `:checked`. Затем выбрать соседний элемент `label` с помощью комбинатора `+`. К этому `label` примените псевдоэлемент `::after` для добавления контента. Итоговый селектор будет выглядеть как `input[type="checkbox"]:checked + label::after`.

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

Результат

Сообщения

Выполнить

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

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

Стиль плейсхолдера при фокусе

Сделайте так, чтобы текст плейсхолдера в поле ввода (`<input type="text">`) становился полупрозрачным, когда поле получает фокус. Используйте псевдокласс для состояния фокуса и псевдоэлемент для стилизации плейсхолдера.

CSS

input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

/* Допишите селектор ниже */
input1 {
  color: #aaa; /* Цвет не меняем */
  opacity: 0.6;
}

                     input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 90%;
}

/* Допишите селектор ниже */
input1 {
  color: #aaa; /* Цвет не меняем */
  opacity: 0.6;
}

HTML

<input type="text" placeholder="Введите ваше имя...">

Выберите поле ввода `input`. Используйте псевдокласс `:focus` для отслеживания момента, когда поле активно. Затем примените псевдоэлемент `::placeholder` для стилизации текста-плейсхолдера. Скомбинируйте их в селекторе (`input:focus::placeholder`).

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

Результат

Сообщения

Выполнить

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

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

Иконка для посещенных ссылок

Добавьте иконку глаза (👁️) перед текстом ссылок (`<a>`), которые пользователь уже посетил. Используйте псевдокласс для посещенных ссылок и псевдоэлемент для вставки контента.

CSS

a {
  color: blue;
  text-decoration: none;
  margin-right: 15px; /* Даем место для иконки */
  position: relative;
}

a:hover {
  text-decoration: underline;
}

/* Допишите селектор ниже */
input1 {
  content: "👁️ ";
  margin-right: 3px;
}

                     a {
  color: blue;
  text-decoration: none;
  margin-right: 15px; /* Даем место для иконки */
  position: relative;
}

a:hover {
  text-decoration: underline;
}

/* Допишите селектор ниже */
input1 {
  content: "👁️ ";
  margin-right: 3px;
}

HTML

<p>
  <a href="#">Ссылка 1 (возможно, посещенная)</a>
  <a href="https://example.com" target="_blank">Ссылка 2 (внешняя)</a>
  <a href="/non-existent-page">Ссылка 3 (несуществующая)</a>
</p>
<p>(Для проверки посещенных ссылок, кликните по ним)</p>

Выберите все ссылки `<a>`. Используйте псевдокласс `:visited` для выбора только посещенных ссылок. Затем примените псевдоэлемент `::before`, чтобы добавить контент перед текстом ссылки. Итоговый селектор: `a:visited::before`.

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

Результат

Сообщения

Выполнить

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

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

Эффект для нечетных элементов при наведении

Добавьте эффект для нечетных элементов списка: при наведении на такой элемент, после его текста должен появляться значок '✨'. Используйте комбинацию псевдоклассов `:nth-child` и `:hover`, а также псевдоэлемент `::after`.

CSS

ul {
  list-style: none;
  padding-left: 10px;
}

li {
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
  cursor: pointer;
}

/* Допишите селектор ниже */
input1 {
  content: " ✨";
  margin-left: 5px;
  color: orange;
}

                     ul {
  list-style: none;
  padding-left: 10px;
}

li {
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
  cursor: pointer;
}

/* Допишите селектор ниже */
input1 {
  content: " ✨";
  margin-left: 5px;
  color: orange;
}

HTML

<ul>
  <li>Первый (нечетный)</li>
  <li>Второй (четный)</li>
  <li>Третий (нечетный)</li>
  <li>Четвертый (четный)</li>
  <li>Пятый (нечетный)</li>
</ul>

Сначала выберите нечетные элементы списка `<li>` с помощью `:nth-child(odd)`. Затем добавьте условие наведения `:hover`. Наконец, используйте псевдоэлемент `::after` для добавления контента после текста элемента. Полный селектор будет `li:nth-child(odd):hover::after`.

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

Результат

Сообщения

Выполнить

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

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

Выделение первой строки активного блока

Сделайте так, чтобы первая строка текста внутри блока `div` становилась жирной, но только когда на сам блок `div` наведен курсор мыши. Используйте псевдокласс `:hover` на родительском элементе и псевдоэлемент `::first-line` на дочернем тексте.

CSS

.text-block {
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.text-block:hover {
 background-color: #f0f0f0;
}

.text-block p {
  margin: 0;
  line-height: 1.5;
}

/* Допишите селектор ниже */
input1 {
  font-weight: bold;
  color: #0056b3;
}

                     .text-block {
  border: 1px solid #ccc;
  padding: 15px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.text-block:hover {
 background-color: #f0f0f0;
}

.text-block p {
  margin: 0;
  line-height: 1.5;
}

/* Допишите селектор ниже */
input1 {
  font-weight: bold;
  color: #0056b3;
}

HTML

<div class="text-block">
  <p>Наведите курсор на этот блок. Первая строка этого длинного текста должна стать жирной и синей при наведении на родительский блок. Остальной текст останется без изменений. Это позволяет выделить начало контента при взаимодействии.</p>
</div>
<div class="text-block">
  <p>Это другой блок. Он также должен реагировать на наведение курсора, и его первая строка текста тоже должна выделяться.</p>
</div>

Нужно применить стиль к первой строке (`::first-line`) абзаца `<p>` внутри `div`. Стиль должен активироваться при наведении (`:hover`) на родительский `div`. Селектор будет выглядеть так: `div:hover p::first-line`.

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

Результат

Сообщения

Выполнить

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

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