Как найти пустые элементы в CSS
- 29 июля 2025
Псевдокласс :empty
помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
Что делает :empty
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Псевдокласс :empty
применяется к элементам, у которых нет ни текста, ни других вложенных элементов. Даже пробелы или переносы строки считаются содержимым, поэтому элемент должен быть полностью пустым, чтобы селектор сработал.
Пример: скрытие пустых элементов списка
Если вы хотите автоматически скрыть пустые элементы <li>
в списке, достаточно добавить простой селектор:
li:empty {
display: none;
}
Этот стиль автоматически исключит из отображения любые элементы списка, у которых нет содержимого. Это особенно полезно при генерации списка на основе данных, где некоторые пункты могут оказаться пустыми.
Что считается пустым элементом
<div></div>
— считается пустым.<div> </div>
— не считается пустым (есть пробел).<div><br></div>
— не считается пустым (есть дочерний элемент).
Чтобы гарантировать, что элемент точно будет пустым, убедитесь, что внутри нет даже невидимых символов (например, пробелов или комментариев).
Пример: очистка формы от пустых полей
Иногда в форме или карточке товара можно оставить пустые контейнеры, например:
<div class="field"></div>
<div class="field">Название товара</div>
Вы можете скрыть все пустые поля с помощью:
.field:empty {
display: none;
}
Когда использовать :empty
- Очистка HTML от ненужных блоков без JavaScript.
- Автоматическая стилизация компонентов, если они пусты (например, скрытие пустых карточек).
- Быстрое удаление визуального шума при отрисовке динамических данных.
:empty
делает интерфейс чище, особенно когда вы работаете с шаблонами или данными, где не всегда гарантировано наличие содержимого.
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link
Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link
, :visited
и :any-link
. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.
Псевдоклассы :link
и :visited
существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link
отвечал за стилизацию непосещённых ссылок, а :visited
— посещённых, основываясь на истории браузера.
Псевдокласс :any-link
появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.
- 24 августа 2025

Правило @import в CSS: модульность и организация стилей
Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import
в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import
, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.
- 22 августа 2025

Псевдоклассы валидации форм: делаем интерфейсы понятнее
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid
и :invalid
. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required
и :optional
. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
- 15 августа 2025

Как сделать первую букву абзаца большой — буквица через ::first-letter
Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS
, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter
, появившийся ещё в спецификации CSS1
в 1996 году.
Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS
вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.
- 12 августа 2025

Лигатуры в CSS: как сделать текст аккуратнее
Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали,
что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки
не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости
и эстетики текста. В вебе ими управляет свойство font-variant-ligatures
.
Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.
Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

CSS-селекторы. Шпаргалка для новичков
Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.
- 8 августа 2025

CSS-градиенты в oklch
Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций
linear-gradient()
или radial-gradient()
. Его используют в вебе для фонов, кнопок,
рамок, декоративных элементов и даже в интерактивных эффектах при наведении.
Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.
Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch
.
Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.
- 8 августа 2025

CSS :has() — проверка наличия потомков или соседних элементов
Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним.
Так работает псевдокласс :has()
: он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент.
В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.
- 6 августа 2025

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения
Функция image()
из модуля CSS Images Level 4 — это «умная» альтернатива url()
, которая умеет больше: задавать
направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh
и даже
рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть.
Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому»
и какие фолбэки использовать уже сейчас.
- 5 августа 2025

Всё самое важное о псевдоклассе :default
Псевдокласс :default
— это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025