Псевдоклассы :not() и :empty [Модуль 3: Селекторы CSS продвинутый уровень]: Тренажер CSS

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

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

Список тем

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

id: 37336_css-not-basic-class

В списке элементов есть один элемент с классом '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()` укажите селектор, который нужно исключить.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-empty-paragraphs

Имеется несколько абзацев, некоторые из них пустые. Сделайте так, чтобы только НЕПУСТЫЕ абзацы получили фоновый цвет `#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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-empty-hide-errors

На странице есть контейнеры для сообщений об ошибках (`<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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-first-child

Нужно добавить верхнюю границу (`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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-active-tab

Имеется список вкладок, одна из которых имеет класс '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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-empty-table-cells

В таблице есть несколько ячеек (`<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`, чтобы стилизовать только те, которые не содержат текста или других элементов.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-input-type

Нужно применить стиль (добавить рамку) ко всем элементам `<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"]`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-contains-image

Есть несколько карточек (`<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)`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-empty-and-not-active

В списке есть элементы (`<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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-multiple-classes

Нужно стилизовать все параграфы (`<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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-empty-not-complex

Есть блоки с классом `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`, чтобы выбрать только непустые блоки. Примените к ним стили для фона и отступа.

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

Результат

Сообщения

Выполнить

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

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

id: 37336_css-not-last-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)`).

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

Результат

Сообщения

Выполнить

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