:not() :is() и :where()
Исключайте элементы с помощью :not(), выбирайте любой элемент из списка через :is(), а для низкой специфичности используйте :where().
«:not() :is() и :where()» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Псевдокласс :not()
:not(selector) выбирает элементы, которые не соответствуют указанному селектору. Он инвертирует выборку.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() с несколькими аргументами
Современный CSS позволяет использовать несколько аргументов внутри :not() — псевдокласс выбирает элементы, которые не соответствуют ни одному из перечисленных селекторов:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Специфичность :not()
Специфичность :not() определяется наиболее специфичным аргументом. У :not(.active) специфичность на уровне класса (0,1,0).
Псевдокласс :is()
:is() выбирает любой элемент, соответствующий хотя бы одному селектору из списка. Он упрощает группировку и уменьшает повторение.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Специфичность :is()
:is() использует специфичность своего наиболее специфичного аргумента. Если список содержит селектор ID, всё правило получает специфичность ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Устойчивый разбор :is()
:is() использует устойчивый разбор селекторов: если какой-либо селектор в списке недействителен, он молча игнорируется, а остальные продолжают применяться. Обычные селекторы, разделённые запятыми, полностью перестают работать, если один из них недействителен.
Псевдокласс :where()
:where() работает точно так же, как :is(), но имеет нулевую специфичность. Он предназначен для служебных классов и стилей сброса, которые должно быть легко переопределить.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() для сброса стилей
:where() идеально подходит для сброса CSS и базовых стилей, которые не должны выигрывать в борьбе за специфичность:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Сравнение специфичности
Сводка поведения специфичности:
:is()— наивысшая специфичность среди аргументов:where()— всегда нулевая специфичность:not()— наивысшая специфичность среди аргументов
Объединение :is() и :not()
Объединяйте их, чтобы создавать точные и понятные селекторы:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Поддержка браузерами
:is() и :where() поддерживаются всеми современными браузерами. :not() с несколькими аргументами поддерживается современными браузерами. Не используйте их в проектах, которым требуется поддержка IE11.
Быстрая проверка
Какой псевдокласс имеет нулевую специфичность независимо от своих аргументов?
Повторение
:not() инвертирует выборку и принимает несколько аргументов. :is() выбирает элементы из списка и получает наивысшую специфичность в этом списке. :where() делает то же самое, но с нулевой специфичностью — идеально для сброса стилей. Все три используют устойчивый разбор, молча игнорируя недействительные селекторы.
Часто задаваемые вопросы
Урок «:not() :is() и :where()» бесплатный?
Да — полный текст урока «:not() :is() и :where()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «:not() :is() и :where()»?
Исключайте элементы с помощью :not(), выбирайте любой элемент из списка через :is(), а для низкой специфичности используйте :where(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «:not() :is() и :where()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- :hover :focus :active и :visited
- :nth-child и :nth-of-type
- :not() :is() и :where()
- :checked :disabled и псевдоклассы состояния формы