Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

Проблемы с селектором :not(:empty) в CSS на примере input

Быстрый ответ

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

CSS
Скопировать код
/* Стили для пустых элементов – окантовка синим цветом */
.element:empty {
  border: 1px solid blue; /* печаль и одиночество, выраженные синим */
}

Демонстрация на HTML-элементах:

HTML
Скопировать код
<div class="element"></div> <!-- Стили будут применены -->
<div class="element"> </div> <!-- Элемент содержит пробел, поэтому он не пуст! -->

Используйте JavaScript для обработки DOM-элементов, которые на первый взгляд кажутся пустыми, но технически таковыми не являются:

JS
Скопировать код
document.querySelectorAll('.element').forEach(el => {
  if (el.innerHTML.trim() === '') { /* метод trim убирает пробелы */
    el.style.border = "1px solid blue"; /* и ставит синий бордюр */
  }
});

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

Кинга Идем в IT: пошаговый план для смены профессии

Управление полями ввода

Элементы <input> – это отдельный случай: они по умолчанию считаются пустыми, и селектор :not(:empty) к ним не применим. Исходя из этого, можно предложить следующие решения:

  • Для стилизации полей ввода с пустым атрибутом value после загрузки страницы используйте input[value=""].
  • Если требуется стилизовать поля ввода без атрибута value, используйте input:not([value]).

Использование placeholders

В случае, если необходимо стилизовать вводимое поле, учитывая наличие или отсутствие placeholder'а, применяйте псевдокласс :placeholder-shown:

CSS
Скопировать код
input:placeholder-shown {  
  background-color: lightyellow; /* поле будет заметно светлее */
}

Динамическая валидация

Псквдоклассы :valid и :invalid дозволяют динамически менять внешний вид поля ввода, отражая его валидность или невалидность:

CSS
Скопировать код
input:not([value=""]):not(:focus):invalid {
  border-color: red; /* красный цвет предупреждает об ошибке */
}

Стилизация при помощи соседних селекторов

В CSS селектор + может быть использован для стилизации дополнительных элементов, которые следуют непосредственно за полем ввода:

CSS
Скопировать код
input:invalid + .validation-message {
  display: block; /* Сообщение об ошибке становится видимым */
}

input:valid + .validation-message {
  display: none; /* Сообщение скрывается, если всё в порядке */
}

Улучшение пользовательского опыта

CSS-транзиции могут обеспечить более плавные переходы для элементов ввода при получении фокуса или при неудачной валидации:

CSS
Скопировать код
input:focus, input:invalid {
  transition: border-color 0.3s ease-in-out; /* изменения происходят мягко и незаметно */
}

Продвинутые рекомендации

Важность совместимости

Кроссбраузерная совместимость остается важным аспектом. Разные браузеры могут иначе интерпретировать пустое состояние элементов. Проверяйте свою стилизацию на caniuse.com.

Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Использование JavaScript и DOM-событий

JavaScript предлагает больше возможностей для точного контроля над элементами:

JS
Скопировать код
document.querySelector("input").addEventListener("input", function() {
  if(this.value) {
    // Применяем стили к непустому полю
  } else {
    // В противном случае стилизуем как пустое поле
  }
});

Mutation Observers

DOM Mutation Observers могут быть подходящим выбором для адаптивной стилизации, которая реагирует на изменения в окружении лучше, чем традиционные события изменений DOM.

Использование атрибута required

Атрибут required позволяет визуально выделить поля, обязательные для заполнения, при помощи CSS-селекторов:

CSS
Скопировать код
input:required:invalid:not(:focus) {  
  border-color: red; /* обязательное поле выделяется, требуя внимания */
}

Визуализация

Считайте, что работа селектора :not(:empty) в CSS – это как свет фонарика 🔦, освещающего дома, где есть жильцы 🏠:

Markdown
Скопировать код
Перед тем, как включил фонарик `:not(:empty)`:

🏠 [] (дом пуст, без освещения)
🏠 [🪑] (в доме есть кресло, но все темно)
🏠 [🛏️] (в доме стоит кровать, но все темно)
Markdown
Скопировать код
Когда фонарик `:not(:empty)` включен:

🔦🏠 (дом пуст, находится в темноте)
🔦🏠 [🪑] (свет включён, кресло ждет своего хозяина)
🔦🏠 [🛏️] (свет включён, приглашает спать на кровати)

Полезные материалы

  1. :not() – MDNПолный гайд по псевдоклассу :not().
  2. :empty – MDNДетальное описание псевдокласса :empty.
  3. :empty | CSS-TricksЭффективное применение CSS-селектора :empty.
  4. :not | CSS-TricksИнтригующие способы использования :not().
  5. Справочник по CSS-селекторамОбзор CSS3-селекторов.
  6. Мастерство работы с продвинутыми CSS-селекторамиПродвинутый гид по CSS-селекторам.
  7. Поддержка CSS3 селекторов браузерами – Can I use...Информация о поддержке CSS3 селекторов веб-браузерами.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой CSS селектор позволяет стилизовать элементы, которые абсолютно пустые?
1 / 5