CSS - :is()
Основное назначение псевдокласса :is(), заключается в объединении нескольких селекторов в одну группу, позволяя выбрать элементы, соответствующие хотя бы одному из указанных селекторов.
Подробнее о псевдоклассе :is()
Псевдокласс :is() (ранее известный как :matches() или :any()) - это удобный способ группировки селекторов в CSS, позволяющий сократить код и улучшить его читаемость.
:is() является частью спецификации CSS Selectors Level 4 и значительно расширяет возможности по работе с селекторами, делая код более модульным и удобным для поддержки.
Псевдокласс :is() в CSS - это мощный инструмент, который позволяет выбирать элементы на основе списка селекторов. Он предоставляет более гибкий и лаконичный способ написания стилей, особенно когда нужно применить одни и те же стили к нескольким различным элементам или группам элементов.
Поддержка браузеров псевдокласса :is()
При открытии этой страницы ваш браузер проходит автоматическую проверку на поддержку псевдокласса :is() с демонстрацией уведомления в правом нижнем углу.
Вы можете открыть этот материал в разных браузерах которые установлены на всех ваших устройствах, чтобы проверить их актуальность поддержки псевдокласса :is().
| Браузер | Поддержка | Версия+ | Примечания |
|---|---|---|---|
| Chrome | Да | 88+ | Раньше назывался :matches() |
 Yandex |
Да | 105+ | С января 2021 года |
| Firefox | Да | 78+ | Поддержка с 2019 года |
| Edge | Да | 88+ | На Chromium, старый Edge не поддерживает |
| Safari | Да | 14+ | Поддержка с 2020 года |
| Internet Explorer | Нет | - | Не поддерживается |
| Opera | Да | 75+ | На базе Chromium |
| iOS Safari | Да | 14.5+ | Частичная поддержка в ранних версиях |
| Android Browser | Да | 91+ | Встроенный браузер Android |
Основные возможности :is()
- Объединение селекторов: Вместо многократного повторения одинаковых правил для разных элементов, можно объединить их в одном правиле с использованием
:is(). - Повышение производительности: Использование
:is()снижает количество селекторов, обрабатываемых браузером, благодаря чему повышается производительность страницы. - Поддержка кроссбраузерности: В настоящее время поддержка
:is()реализована практически всеми современными браузерами начиная с января 2021 года. Для старых версий можно использовать полифиллы и альтернативные подходы вроде:matches()или префиксированных версий (::-webkit-any,::-moz-any). - Особенности поведения: Важно отметить, что
:is()учитывает специфичность каждого селектора внутри себя. Если один из селекторов некорректен, остальные будут применяться корректно. Напротив, обычный список селекторов игнорируется целиком, если среди них встречается неподдерживаемый браузером селектор. - Упрощение иерархии HTML разметки: Особенно удобен при работе с глубокими уровнями вложения HTML элементов. Можно легко выбирать элементы определенного уровня вложенности.
- Оптимизация больших проектов: Благодаря способности группировать селекторы,
:is()позволяет оптимизировать большие проекты, сокращая объем CSS кода и повышая удобство поддержки стиля.
Примеры синтаксиса :is()
Основной синтаксис :is()
:is() принимает список селекторов, разделённых запятыми:
:is(selector1, selector2, selector3) { правила стиля }
Использование :is() с комбинаторами
Вложенность (пробел)
/* Стили для <li> внутри <ul> или <ol> */
:is(ul, ol) li {
margin-left: 20px;
}
Дочерний комбинатор (>)
/* Стили для прямых дочерних <button> в <header> или <footer> */
:is(header, footer) > button {
padding: 10px;
}
Соседний комбинатор (+)
/* Стиль для <p>, который идёт сразу после <h2> или <h3> */
:is(h2, h3) + p {
margin-top: 0;
}
Общий комбинатор следующих элементов (~)
/* Стиль для всех <span> после <h1> или <h2> */
:is(h1, h2) ~ span {
font-size: 0.9em;
}
Использование :is() с другими псевдоклассами
С псевдоклассами :hover, :focus
:is(a, button):hover {
opacity: 0.8;
}
С псевдоклассом :not()
/* Все элементы, кроме <h1> и <h2> */
:not(:is(h1, h2)) {
color: gray;
}
С псевдоклассом :has()
/* <div>, содержащий либо <h2>, либо <h3> */
div:has(:is(h2, h3)) {
border: 1px solid red;
}
Особенности :is()
Специфичность
Специфичность :is() равна наибольшей специфичности среди переданных селекторов.
/* Специфичность как у #id (1-0-0) */
:is(#id, .class, p) { правила стиля }
Отказоустойчивость
Если один из селекторов невалиден, то браузер проигнорирует только его, а не весь блок.
/* Применится к h1 и h2 */
:is(h1, :invalid-pseudo, h2) { правила стиля }
В CSS3 :not(:is(...)) работает, но в старых версиях - не работает.
Практические примеры сопоставления с :is()
Упрощение сложных селекторов
/* Без :is() */
nav ul li a, aside ul li a, .menu ul li a { правила стиля }
/* С :is() */
:is(nav, aside, .menu) ul li a { правила стиля }
Группировка селекторов
/* Без использования :is() */
section h1, section h2, section h3, article h1, article h2, article h3 { правила стиля }
/* С использованием :is() */
:is(section, article) :is(h1, h2, h3) { правила стиля }
Поддержка сложных селекторов
:is(.header, .footer) :is(a:hover, a:active) { правила стиля }
Демо примеры использования :is()
Любой из демо примеров доступен для редактирования, вносите свои изменения, чтобы лучше понять возможности использования псевдокласса :is().
Простая группировка элементов
Задаём общий стиль для нескольких заголовков.
Стилизация элементов внутри разных контейнеров
Устанавливаем одинаковый стиль для кнопок в <header> и <footer>.
Упрощение вложенных селекторов
Стилизуем <span> внутри <div> или <p>.
Группировка псевдоклассов
Стилизуем :hover для ссылок и кнопок.
Комбинация с :not()
Применить стиль ко всем элементам, кроме <h1> и <h2>.
Стилизация списков в разных секциях
Создаём одинаковый стиль для <ul> в <section> и <aside>.
Гибкий выбор атрибутов
Стилизуем ссылки с разными атрибутами.
Комбинация с :has()
Стилизуем <div>, внутри которого есть <h2> или <h3>.
Упрощение медиазапросов
Скрываем <nav> в <header> и <footer> на мобильных.
Комплексный пример
Стилизуем кнопки внутри карточек в разных секциях.
Проверка браузера на поддержку :is()
Сделайте проверку вашего браузера на поддержку псевдокласса :is(). Напоминаем, что проверка поддержки осуществляется автоматически, при загрузке этой страницы.
Полезные ссылки
