Доступно в Baseline в статусе «Widely Available» с 2023-07-21

Псевдокласс :not() позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.

Зачем нужен :not()

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Представьте, что у вас десятки ссылок на странице, и все они должны быть красными — кроме ссылок в футере. Раньше приходилось делать сложные селекторы вроде:

a {
  color: red;
}
footer a {
  color: inherit;
}

Теперь можно проще:

a:not(footer a) {
  color: red;
}

Но важнее — это читаемость и поддерживаемость. Использование :not() позволяет явно выразить: «применить стиль ко всем, КРОМЕ».

Простой пример

a:not(.no-red) {
  color: red;
}

Этот селектор задаёт красный цвет всем ссылкам, кроме тех, у которых есть класс no-red.

Несколько селекторов внутри :not()

С CSS4 можно передавать список селекторов в :not() через запятую:

button:not(.primary, .danger) {
  opacity: 0.5;
}

Это значит: применить стиль ко всем кнопкам, кроме тех, у которых класс primary или danger.

Важно: эта возможность поддерживается не во всех старых браузерах. Для уверенности — проверяйте на Can I use.

Вложенные селекторы

Можно использовать :not() с составными селекторами:

ul li:not(:last-child) {
  margin-bottom: 10px;
}

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

Комбинирование с другими псевдоклассами

:not() можно комбинировать с hover, nth-child, disabled и другими:

input:not(:disabled):hover {
  border-color: blue;
}

Этот код применяет рамку только к активным полям ввода при наведении.

Лучшие практики

  • Не усложняйте: если правило стало нечитабельным — лучше пересмотреть структуру HTML или классы.
  • Не злоупотребляйте вложенными :not(), чтобы не усложнять отладку.
  • Всегда тестируйте в браузерах, особенно если используете списки селекторов.

Отличие от других способов

Вместо :not() вы можете попробовать JS или ручную фильтрацию классов, но CSS-подход лучше по производительности и проще в поддержке. В современных проектах :not() — стандартный инструмент для выборки с исключениями.

Заключение

Псевдокласс :not() — это ваш фильтр в мире CSS. Он позволяет явно исключать ненужные элементы из выборки и писать стили точнее и лаконичнее. Поддерживается всеми современными браузерами и особенно полезен при работе с дизайн-системами и компонентами.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Лигатуры в CSS: как сделать текст аккуратнее

Лигатуры в CSS: как сделать текст аккуратнее

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

Изображения лигатур

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

Читать дальше
CSS
  • 9 августа 2025
CSS-селекторы. Шпаргалка для новичков

CSS-селекторы. Шпаргалка для новичков

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

Читать дальше
CSS
  • 8 августа 2025
CSS-градиенты в oklch

CSS-градиенты в oklch

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

Читать дальше
CSS
  • 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов

CSS :has() — проверка наличия потомков или соседних элементов

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

Читать дальше
CSS
  • 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

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

Читать дальше
CSS
  • 5 августа 2025
Всё самое важное о псевдоклассе :default

Всё самое важное о псевдоклассе :default

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Читать дальше
CSS
  • 4 августа 2025
Как работает единица измерения em в CSS

Как работает единица измерения em в CSS

Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Читать дальше
CSS
  • 30 июля 2025
Как найти пустые элементы в CSS

Как найти пустые элементы в CSS

Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.

Читать дальше
CSS
  • 29 июля 2025
Как работает ::first-line — оформление первой строки текста в CSS

Как работает ::first-line — оформление первой строки текста в CSS

Псевдоэлемент ::first-line позволяет задать особое оформление только для первой строки текста внутри элемента. Это полезно, когда нужно визуально выделить начало абзаца — например, сделать первую строку жирной, изменить цвет или стиль шрифта. Такой приём часто используют в типографике и веб-дизайне, чтобы направить внимание читателя.

Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29

Как использовать: first-line

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

p::first-line {
  font-weight: bold;
  color: red;
}

Этот стиль сделает только первую строку текста в каждом абзаце <p> красной и жирной. Важно: то, где заканчивается строка, зависит от ширины контейнера и размера шрифта, а не от переносов в HTML.

Какие свойства работают

Псевдоэлемент ::first-line не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:

Поддерживаются:

  • color
  • font и его производные (font-size, font-weight, font-style, font-variant)
  • letter-spacing, word-spacing
  • line-height
  • text-decoration
  • text-transform
  • vertical-align
  • background
  • margin-left и margin-right
  • padding-left и padding-right
  • border-left и border-right

Не поддерживаются:

  • display, position, transform, width, height и другие «структурные» свойства.

Это сделано, чтобы не нарушать верстку и избежать проблем с потоком документа.

Пример с цитатой

<blockquote>
  Когда вы начнёте, главное — не останавливаться.
</blockquote>
blockquote::first-line {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.

Советы по использованию

  • Используйте ::first-line для декоративных акцентов: начало статьи, цитаты, описание карточки.
  • Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
  • Не используйте псевдоэлемент для логических операций — он только визуальный.
  • Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.

Поддержка

Псевдоэлемент ::first-line поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block, inline-block, inline).

Заключение

::first-line — это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

CSS
  • 27 июля 2025
CSS-счётчики: как работает свойство counter-set

CSS-счётчики: как работает свойство counter-set

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент. Оно похоже на counter-reset, но отличается тем, что не сбрасывает счётчик, а просто присваивает ему конкретное значение. Это даёт больше контроля над нумерацией, особенно когда нужно продолжить счёт или задать его вручную в разных частях документа.

CSS-счётчики — это способ автоматически нумеровать элементы, например заголовки, пункты списка, шаги в инструкции. Их можно комбинировать с псевдоэлементами и свойством content, чтобы вставлять числа прямо в текст.

Читать дальше
CSS
  • 25 июля 2025