Псевдоклассы :not() и :empty: Тренажер CSS

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

Эта серия упражнений предназначена для отработки навыков использования псевдоклассов `:not()` и `:empty` в CSS. Вам предстоит работать с готовым HTML-кодом и дополнять CSS-правила, заполняя пропущенные фрагменты. Задания построены по принципу 'от простого к сложному' и помогут вам научиться выбирать элементы, которые НЕ соответствуют определенному селектору (`:not()`), а также находить и стилизовать элементы, не имеющие дочерних узлов или текста (`:empty`). Выполняя задания, вы будете сразу видеть результат своих изменений в окне предпросмотра.

Список тем

Выбор всех, кроме одного класса

В списке элементов есть один элемент с классом 'special'. Используйте псевдокласс :not(), чтобы применить стиль (красный цвет текста) ко всем элементам списка, КРОМЕ элемента с классом 'special'.

CSS

ul li:input1(input2) {
  color: red;
}

                     ul li:input1(input2) {
  color: red;
}

HTML

<ul>
  <li>Элемент 1</li>
  <li class="special">Элемент 2 (особенный)</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

Вам нужно выбрать все элементы `<li>`. Затем, используя псевдокласс `:not()`, исключить из выборки элемент с классом `.special`. Внутри скобок `:not()` укажите селектор, который нужно исключить.

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

Результат

Сообщения

Выполнить

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

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

Стилизация непустых абзацев

Имеется несколько абзацев, некоторые из них пустые. Сделайте так, чтобы только НЕПУСТЫЕ абзацы получили фоновый цвет `#f0f0f0` и внутренние отступы `10px`. Используйте псевдокласс `:not()` в сочетании с `:empty`.

CSS

p:input1(input2) {
  background-color: #f0f0f0;
  padding: 10px;
}

                     p:input1(input2) {
  background-color: #f0f0f0;
  padding: 10px;
}

HTML

<p>Это первый абзац с текстом.</p>
<p></p>
<p>Это второй абзац с текстом.</p>
<p>  </p> <!-- Считается непустым из-за пробелов -->
<p>Третий абзац.</p>
<p></p>

Сначала выберите все абзацы (`p`). Затем примените псевдокласс `:not()`, чтобы исключить пустые абзацы. Внутри `:not()` используйте псевдокласс `:empty`.

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

Результат

Сообщения

Выполнить

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

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

Скрытие пустых сообщений об ошибках

На странице есть контейнеры для сообщений об ошибках (`<div class='error-message'>`). Некоторые из них могут быть пустыми. Скройте все ПУСТЫЕ контейнеры сообщений об ошибках, используя псевдокласс `:empty`.

CSS

input1:input2 {
  display: none;
}

                     input1:input2 {
  display: none;
}

HTML

<div class="form-group">
  <label>Имя:</label>
  <input type="text">
  <div class="error-message">Поле обязательно для заполнения</div>
</div>
<div class="form-group">
  <label>Email:</label>
  <input type="email">
  <div class="error-message"></div>
</div>
<div class="form-group">
  <label>Пароль:</label>
  <input type="password">
  <div class="error-message"></div>
</div>

Выберите все элементы с классом `error-message`. Затем добавьте псевдокласс `:empty`, чтобы выбрать только те из них, которые не содержат дочерних элементов или текста. Примените к ним свойство `display` со значением `none`.

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

Результат

Сообщения

Выполнить

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

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

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

Нужно добавить верхнюю границу (`border-top`) ко всем элементам списка (`<li>`), кроме самого первого. Используйте псевдокласс `:not()` в сочетании с другим псевдоклассом.

CSS

ul li:input1(input2) {
  border-top: 1px solid #ccc;
  padding-top: 5px;
  margin-top: 5px;
}

                     ul li:input1(input2) {
  border-top: 1px solid #ccc;
  padding-top: 5px;
  margin-top: 5px;
}

HTML

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

Выберите все элементы `<li>`. Используйте псевдокласс `:not()`, чтобы исключить первый элемент. Внутри `:not()` используйте псевдокласс `:first-child`.

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

Результат

Сообщения

Выполнить

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

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

Выбор неактивных вкладок

Имеется список вкладок, одна из которых имеет класс 'active'. Примените стиль (серый цвет фона) ко всем вкладкам (`<div class='tab'>`), которые НЕ имеют класса 'active'.

CSS

.tab:input1(input2) {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: -1px; /* Для прилегания */
}

.tab.active {
  background-color: #fff;
  border-bottom-color: #fff;
}

                     .tab:input1(input2) {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: -1px; /* Для прилегания */
}

.tab.active {
  background-color: #fff;
  border-bottom-color: #fff;
}

HTML

<div class="tabs">
  <div class="tab">Вкладка 1</div>
  <div class="tab active">Вкладка 2</div>
  <div class="tab">Вкладка 3</div>
</div>

Выберите все элементы с классом `tab`. Используйте псевдокласс `:not()`, чтобы исключить элемент с классом `.active`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация пустых ячеек таблицы

В таблице есть несколько ячеек (`<td>`), некоторые из них пустые. Задайте светло-серый фон (`#f5f5f5`) всем ПУСТЫМ ячейкам таблицы.

CSS

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

input1:input2 {
  background-color: #f5f5f5;
}

                     table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

input1:input2 {
  background-color: #f5f5f5;
}

HTML

<table>
  <tr>
    <td>Данные 1</td>
    <td></td>
    <td>Данные 3</td>
  </tr>
  <tr>
    <td></td>
    <td>Данные 5</td>
    <td></td>
  </tr>
</table>

Выберите все ячейки таблицы (`td`). Добавьте псевдокласс `:empty`, чтобы стилизовать только те, которые не содержат текста или других элементов.

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

Результат

Сообщения

Выполнить

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

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

Исключение полей ввода определенного типа

Нужно применить стиль (добавить рамку) ко всем элементам `<input>`, КРОМЕ тех, у которых тип 'checkbox'. Используйте `:not()` с селектором атрибута.

CSS

input:input1(input2) {
  border: 2px solid blue;
  margin-bottom: 10px;
  padding: 5px;
  display: block; /* для наглядности */
  width: calc(100% - 14px); /* учтем padding и border */
}

                     input:input1(input2) {
  border: 2px solid blue;
  margin-bottom: 10px;
  padding: 5px;
  display: block; /* для наглядности */
  width: calc(100% - 14px); /* учтем padding и border */
}

HTML

<form>
  <input type="text" placeholder="Текстовое поле">
  <input type="email" placeholder="Email поле">
  <input type="checkbox" id="check">
  <label for="check">Чекбокс</label>
  <input type="password" placeholder="Пароль">
</form>

Выберите все элементы `input`. Используйте псевдокласс `:not()`, чтобы исключить элементы с атрибутом `type`, равным `checkbox`. Внутри `:not()` укажите селектор атрибута `[type="checkbox"]`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация карточек без изображений

Есть несколько карточек (`<div class='card'>`). Некоторые содержат изображение (`<img>`), а некоторые нет. Добавьте фоновый узор (используя `background-image`) только тем карточкам, которые НЕ содержат элемента `<img>`.

CSS

.card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 15px;
  min-height: 100px; /* Для наглядности фона */
}
.card img {
  max-width: 50px; /* Ограничим размер картинок */
  display: block;
  margin-bottom: 10px;
}

.card:input1(input2) {
  background-image: url('https://naytikurs.ru/img/7.png'); /* Фоновый узор */
  background-repeat: repeat;
}

                     .card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 15px;
  min-height: 100px; /* Для наглядности фона */
}
.card img {
  max-width: 50px; /* Ограничим размер картинок */
  display: block;
  margin-bottom: 10px;
}

.card:input1(input2) {
  background-image: url('https://naytikurs.ru/img/7.png'); /* Фоновый узор */
  background-repeat: repeat;
}

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <p>Карточка с картинкой</p>
</div>
<div class="card">
  <p>Карточка без картинки</p>
</div>
<div class="card">
  <p>Еще одна карточка без картинки</p>
</div>
<div class="card">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <p>Другая карточка с картинкой</p>
</div>

Выберите все карточки с классом `card`. Используйте псевдокласс `:not()`. Внутри `:not()` используйте псевдокласс `:has()`, чтобы выбрать карточки, которые НЕ `:has(img)`.

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

Результат

Сообщения

Выполнить

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

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

Выделение непустых и неактивных элементов

В списке есть элементы (`<div class='item'>`), некоторые из них пустые, а один имеет класс 'active'. Примените стиль (зеленую рамку слева) ко всем элементам, которые одновременно НЕ являются пустыми и НЕ имеют класс 'active'.

CSS

.item:input1(input2):input3(input4) {
  border-left: 5px solid green;
  padding-left: 10px;
  margin-bottom: 5px;
  min-height: 20px; /* Для видимости пустых */
  background-color: #f9f9f9; /* Фон для всех */
}

.item.active {
  font-weight: bold;
}

                     .item:input1(input2):input3(input4) {
  border-left: 5px solid green;
  padding-left: 10px;
  margin-bottom: 5px;
  min-height: 20px; /* Для видимости пустых */
  background-color: #f9f9f9; /* Фон для всех */
}

.item.active {
  font-weight: bold;
}

HTML

<div class="list">
  <div class="item">Элемент 1</div>
  <div class="item active">Элемент 2 (активный)</div>
  <div class="item"></div>
  <div class="item">Элемент 3</div>
  <div class="item"></div>
</div>

Выберите все элементы с классом `item`. Используйте цепочку из двух псевдоклассов `:not()`. Первый `:not()` должен исключать пустые элементы (`:empty`), а второй `:not()` должен исключать элемент с классом `.active`.

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

Результат

Сообщения

Выполнить

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

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

Исключение нескольких классов

Нужно стилизовать все параграфы (`<p>`), кроме тех, что имеют класс 'warning' или класс 'info'. Используйте один псевдокласс `:not()` со списком селекторов.

CSS

p:input1(input2) {
  text-decoration: underline;
}

.warning {
  color: orange;
}

.info {
  color: blue;
}

                     p:input1(input2) {
  text-decoration: underline;
}

.warning {
  color: orange;
}

.info {
  color: blue;
}

HTML

<p>Обычный параграф.</p>
<p class="warning">Предупреждение!</p>
<p>Еще один обычный параграф.</p>
<p class="info">Информация.</p>
<p>Последний обычный параграф.</p>

Выберите все параграфы `p`. Используйте псевдокласс `:not()`. Внутри скобок `:not()` перечислите через запятую селекторы, которые нужно исключить: `.warning` и `.info`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация непустых блоков предупреждений

Есть блоки с классом `alert`. Некоторые из них пустые. Нужно добавить иконку (фоновое изображение) и отступ слева только НЕПУСТЫМ блокам `alert`. Пустые блоки должны остаться без изменений.

CSS

.alert {
  border: 1px solid #f0c0c0;
  margin-bottom: 10px;
  min-height: 20px; /* Чтобы пустые были видны */
  padding: 10px;
  background-color: #f9eaea;
}

.alert:input1(input2) {
  padding-left: 35px;
  background-image: url('https://naytikurs.ru/img/8.png');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
}

                     .alert {
  border: 1px solid #f0c0c0;
  margin-bottom: 10px;
  min-height: 20px; /* Чтобы пустые были видны */
  padding: 10px;
  background-color: #f9eaea;
}

.alert:input1(input2) {
  padding-left: 35px;
  background-image: url('https://naytikurs.ru/img/8.png');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
}

HTML

<div class="alert">Важное сообщение!</div>
<div class="alert"></div>
<div class="alert">Еще одно сообщение.</div>
<div class="alert"></div>

Выберите блоки с классом `alert`. Используйте псевдокласс `:not()` в сочетании с `:empty`, чтобы выбрать только непустые блоки. Примените к ним стили для фона и отступа.

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

Результат

Сообщения

Выполнить

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

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

Исключение последнего элемента из непустых

В списке есть элементы, некоторые пустые. Нужно добавить нижнюю границу всем НЕПУСТЫМ элементам списка (`<li>`), КРОМЕ последнего НЕПУСТОГО элемента.

CSS

ul li {
  padding: 5px 0;
  min-height: 1em; /* Для видимости пустых */
}

ul li:input1(input2):input3(input4) {
  border: 1px dashed blue;
}

                     ul li {
  padding: 5px 0;
  min-height: 1em; /* Для видимости пустых */
}

ul li:input1(input2):input3(input4) {
  border: 1px dashed blue;
}

HTML

<ul>
  <li>Элемент 1</li>
  <li></li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li></li>
</ul>

Это сложнее. Прямого селектора 'последний непустой' нет. Проще выбрать все непустые элементы `li:not(:empty)` и добавить им границу. Затем нужно найти способ убрать границу у последнего непустого. Один из вариантов: если последний элемент списка пустой, то границу нужно убрать у предпоследнего элемента, если он непустой. Если же последний элемент списка непустой, то границу нужно убрать у него. CSS `:last-child` выбирает последний элемент независимо от того, пустой он или нет. Попробуйте выбрать все непустые `li:not(:empty)` и добавить им границу. Затем выберите последний элемент списка `li:last-child` и, если он непустой (`li:last-child:not(:empty)`), уберите у него границу. Если же он пустой, то нужно выбрать предпоследний элемент, если он непустой, и убрать границу у него. Это может потребовать более сложных селекторов или другого подхода, например, стилизовать все непустые, а потом переопределить стиль для последнего непустого, если это возможно с текущими селекторами. Более простой подход для этого упражнения: Стилизуйте все элементы `li`, которые НЕ являются последним элементом (`:not(:last-child)`) и при этом НЕ являются пустыми (`:not(:empty)`).

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

Результат

Сообщения

Выполнить

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

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