Как сделать вложенность в css

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

Если селекторы по тегам нужно использовать пореже, а по классам почаще, то придётся каждому тегу в разметке добавлять класс? Нет, это ненужное усложнение кода.

Зачем мы использовали классы? Чтобы ограничить количество тегов, к которым применится CSS-правило: не ко всем тегам, а к тегам с нужным классом. Но ограничивать область применения стилей можно и по-другому. Вот список внутри навигации:

Как применить стили только к этому списку? Первый способ: добавить ему класс и использовать селектор по этому классу. Второй способ: использовать специальный селектор, чтобы стили применялись к спискам внутри блока с классом blog-navigation .

Вы можете комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a /* выберет теги a внутри тегов nav */ .menu ul /* теги ul внутри тегов с классом menu */ .post .title /* теги с классом title внутри тегов с классом post */ 

Узнали селектор nav a из второго задания? Он помог сделать ссылки белыми только в навигации, в остальном тексте они остались синими.

Комбинировать можно любое количество селекторов, но лучше использовать двойную или максимум тройную вложенность. Вложенные селекторы спасают нас от необходимости придумывать имена классов и загромождать ими разметку.

Давайте изменим пару селекторов в стилях блога, а заодно улучшим оформление заголовков и элементов списка внутри навигации (уже используя правильные селекторы).

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует 16 января 2024. Всего от 4 130 ₽ в месяц.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Сайт начинающего верстальщика

Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

Раздел про навыки

Вложенность в CSS

При написании тегов HTML часто бывает необходимо вкладывать теги друг в друга, но огромное дерево DOM очень плохо влияет на оптимизацию страницы. Чтобы «приблизиться» к желаемому тегу класса, может быть полезно использовать вложенные селекторы.

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

Cинтаксис

Минусы использования вложенности

Вы знаете как осуществляется работа подключения стилей? При загрузке html разметки, css свойства по порядку проходят по DOM – дереву разметки, периодически добавляя им стили. Сейчас представьте, если вложенность в DOM больше 10 и стили имея вложенность, каждый раз, когда сравнивают порядок тегов, классов, id. Какая большая нагрузка идёт. По итогу получается большое время ожидание при загрузке сайта.

Разберем на примере комбинированных селекторов:

CSS код:
.search.search_theme_light Color:blue;
>

Если добавить модификатор к элементу описанному выше, то он не перепишет стиль из-за вложенности в css.
.search_active

Данный модификатор сработает лишь, в том случае, если описать его так:
.search.search_disabled <>

Верное использование классов в css. Нужно стремиться к простому виду селекторов классов:
.body_position_fixed <>
.body_scroll-active <>

А при большом наименовании классов к примеру: main-blog-item__description-img.
При таких классах с использованием вложенности, вы зайдя в проект через неделю забудете где, что и как лежит/работает.

Теперь перейдите в один из ваших проектов и проверьте код, там должно быть минимальное количество вложенных селекторов. Вложенные селекторы повышают согласованность кода и предотвращают повторное использование.

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

Вложенность подходит, если вам нужно изменить стили элементов в зависимости от модификатора (например, состояния конкретного блока или темы)

Важно: Для того, чтобы перебивать стили класса, нужно код разместить ниже класса!

Чтобы грамотно пользоваться перебиванием стилей нужно знать приоритеты селекторов. Старайтесь не создавать css с множеством использования !important, так как это показывает, что ваш код “неправильный” и в нем есть ошибки. Бывают конечно же исключения из правил.

• *- 0 0 0
• style — 1 0 0 0
• !important — больше 1 0 0 0
• #id — 0 1 0 0
• class — 0 0 10
• [ attr=val ] — 0 0 10

В чём отличие class от id?

Основное отличие, один и тот же Class можно использовать повторно и применять в любом месте. Id – это уникальное имя, которое будет использовано один раз.

Свойства описанные в css через id буду иметь больший вес, чем свойство имея class. Веса селекторов вы могли видеть выше.

.class /*этот класс будет работать в любом теге*/
p#id /*id применится ко всем p, но если будут дубликаты этого id*/

Как полезно использовать id не делая из них описание стилей, это добавление в элементы, которые будут обработаны скриптами. Наш любимый друга JavaScript, id будет гораздо легче найти и не создавать кучу функций.

Вывод: Для JavaScript отличный вариант использовать id, а для других целей попробуйте обойтись классом, только в самых редких случаях можно пренебречь id.

Как правильно писать вложенность в SCSS?

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

Представим ситуацию, у вас большой проект и в нём нужно использовать несколько вложенности. Не используя препроцессор будет полная каша в коде, особенно, если классы будут состоять из 2-3 слов. Как не нужно писать вложенность (данный способ можно использовать, если вы не знаете препроцессоры less/sass/scss)

На изображении показана верная вложенность в препроцессоре scss. Согласитесь, что это более структурировано и понятно?!

Как сократить код CSS

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

Преимущества данных сборщиков заключается в структуре и быстроте написания кода. Разбивая все компоненты по папкам со стилями и скриптами, вы получаете понятную структуру проекта

Позволяют соединять действия и состояния нескольких блоков без дублирования

В html реализации:

В css реализации:

.wrap < color: black; margin: 10px; font-size: 100px; >.wrap__header

• Стилизация групп блоков

p, header

Методология БЭМ в CSS

• Игнорировать структуру DOM и изучить как правильно создавать блоки;
• Уменьшите количество вложенности в селектарах;
• Используйте единство в названии классов, чтобы не было конфликтов имен и сделать имена селекторов как можно более подробными и понятными;
• Во избегания конфликтов имен, нужно использовать единство в именах классов. А названия делать ясными и не делать упор на внешний вид, а на информативность;
• Работать в едином плане блоков, элементов и модификаторов;
• Использовать смеси;
• Разгруппировать код на небольшие кусочки для удобной работы с отдельными блоками
• Блоки – это подобие компонентов, которые могут повторяться. Если элементов одинаковых 2 и более, то делаем блок.

Компоненты в коде

Для избегания повторения кода просмотрите макет сначала до конца. Разбирая блоки и стили, которые повторяются несколько раз. Компоненты именуются двумя и более словами, с дефисом между ними.

• Кнопка (.button)
• Форма поиска (.search-form)
• Статья (.article)
• Карточка(.card)

Пример компоненты – card

Название элементов

Каждый компонент может содержать элементы. Они описываются классами в их именах словом.

Избегайте селекторов по тегу

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

.card-wrapper < >h3 < /* так лучше не делать */ >> .name < /*так лучше делать */ >>

Заключение

Вложение необходимо в элементы, где оно не может существовать отдельно. Кроме того, вложение идеально подходит для псевдоэлементов и псевдоклассов: before, after, hover, focus, visited и тд. Надеемся, что теперь ваш код станет понятным и комфортным в использование другим разработчикам. Повышайте свои скиллы и пишите красивый код. Желаем успехов!

Вложенность CSS

До появления вложенности каждый селектор нужно было объявлять отдельно друг от друга. Это приводит к повторению, большому объёму таблиц стилей и разрозненности процесса создания.

До:

.nesting  
color: hotpink; 
> 
 
.nesting > .is  
color: rebeccapurple; 
> 
 
.nesting > .is > .awesome  
color: deeppink; 
>

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

.nesting  
color: hotpink; 
 
> .is  
color: rebeccapurple; 
 
> .awesome  
color: deeppink; 
> 
> 
>

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

Вложенность может помочь с:

• Организацией кода
• Уменьшением размера файла
• Рефакторингом

Вложенность доступна в Chrome 112, а также в Safari Technical Preview 162.

Начало работы с Вложенностью CSS

На протяжении оставшейся части этой статьи используется следующая демо-песочница (к сожалению, в оригинальной статье не указана ссылка, только скриншот), которая поможет вам визуализировать выбор. В этом состоянии по умолчанию ничего не выбрано и всё видно. Выбирая различные формы и размеры, вы можете попрактиковаться в синтаксисе и увидеть его в действии.

Внутри песочницы находятся круги, треугольники и квадраты. Некоторые из них маленькие, средние или большие. Одни синие, другие розовые или фиолетовые. Все они находятся внутри элемента .demo . Ниже приведён HTML код элементов, на который вы будете ориентироваться.

div class="demo"> 
div class="sm triangle pink">div> 
div class="sm triangle blue">div> 
div class="square blue">div> 
div class="sm square pink">div> 
div class="sm square blue">div> 
div class="circle pink">div> 
… 
div>

Примеры вложения

Вложение CSS позволяет определять стили для элемента в контексте другого селектора.

.parent  
color: blue; 
 
.child  
color: red; 
> 
>

В этом примере селектор класса .child вложен в селектор класса .parent . Это означает, что вложенный селектор .child будет применяться только к элементам, которые являются дочерними элементами элементов с классом .parent .

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

.parent  
color: blue; 
 
& .child  
color: red; 
> 
>

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

Выделение кругов

Для первого примера задача состоит в том, чтобы добавить стили затухания и размытия только для кругов внутри .demo .

Без вложенности, CSS сегодня:

.demo .circle  
opacity: .25; 
filter: blur(25px); 
>

С вложенностью, есть два допустимых способа:

/* & явно помещается перед .circle */ 
.demo  
& .circle  
opacity: .25; 
filter: blur(25px); 
> 
>

/* без &, только с отступом */ 
.demo  
.circle  
opacity: .25; 
filter: blur(25px); 
> 
>

В результате, все элементы с классом .circle внутри .demo размыты и почти невидимы:

Выделение треугольников и квадратов

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

Без вложенности, в CSS сегодня есть два пути:

.demo .triangle, 
.demo .square  
opacity: .25; 
filter: blur(25px); 
>

или, используя :is()

/* сгруппировано с :is() */ 
.demo :is(.triangle, .square)  
opacity: .25; 
filter: blur(25px); 
>

С вложенностью есть два допустимых способа:

.demo  
& .triangle, 
& .square  
opacity: .25; 
filter: blur(25px); 
> 
>

.demo  
.triangle, .square  
opacity: .25; 
filter: blur(25px); 
> 
>

Оба варианта вложенности будут использовать :is() под капотом следующим образом.

.demo :is(.triangle, .square)  
opacity: .25; 
filter: blur(25px); 
>

В результате внутри .demo останутся только элементы .circle .

Выделение больших треугольников и кругов

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

Без вложенности CSS сегодня:

.demo .lg.triangle, 
.demo .lg.square  
opacity: .25; 
filter: blur(25px); 
>

.demo .lg:is(.triangle, .circle)  
opacity: .25; 
filter: blur(25px); 
>

С вложенностью два допустимых варианта:

.demo  
.lg.triangle, 
.lg.circle  
opacity: .25; 
filter: blur(25px); 
> 
>

.demo  
.lg  
&.triangle, 
&.circle  
opacity: .25; 
filter: blur(25px); 
> 
> 
>

В результате все большие треугольники и круги внутри .demo скрыты:

Профессиональный совет с составными селекторами и вложенностью

Здесь вам поможет символ & , так как он явно показывает, как присоединяться к вложенным селекторам. Рассмотрим следующий пример:

.demo  
.lg  
.triangle, 
.circle  
opacity: .25; 
filter: blur(25px); 
> 
> 
>

Хотя это допустимый способ вложения, результаты не будут соответствовать ожидаемым элементам. Причина в том, что без & для указания желаемого результат .lg.triangle, .lg.circle , составленного вместе, фактический результат будет .lg .triangle, .lg .circle ; селекторы потомков.

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

Выбор всех фигур кроме розовых

Для этой задачи требуется функциональный псевдокласс :not() , в котором элементы не должны иметь указанный селектор.

Без вложенности CSS сегодня:

.demo :not(.pink)  
opacity: .25; 
filter: blur(25px); 
>

С вложенностью два допустимых варианта:

.demo  
:not(.pink)  
opacity: .25; 
filter: blur(25px); 
> 
>

.demo  
& :not(.pink)  
opacity: .25; 
filter: blur(25px); 
> 
>

В результате все фигуры, не розового цвета, скрыты внутри .demo :

Точность и гибкость с &

Скажем, вы хотели выбрать .demo с помощью селектора :not() . & потребуется для этого:

.demo  
&:not()  
. 
> 
>

Это объединяет .demo и :not() в .demo:not() , в отличие от предыдущего пример, в котором требовалось .demo :not() . Это напоминание очень важно, когда вы хотите вложить взаимодействие :hover .

.demo  
&:hover  
/* .demo:hover */ 
> 
 
:hover  
/* .demo :hover */ 
> 
>

Больше примеров с вложенностью

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

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

Вложенность @media

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

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

.card  
font-size: 1rem; 
 
@media (width >= 1024px)  
font-size: 1.25rem; 
> 
>

& Также может явно использоваться:

.card  
font-size: 1rem; 
 
@media (width >= 1024px)  
&.large  
font-size: 1.25rem; 
> 
> 
>

В этом примере показан расширенный синтаксис & , а также нацелены на .large карты, чтобы продемонстрировать, что дополнительные функции вложения продолжают работать.

Вложения где угодно

Все примеры до этого момента были продолжены или добавлены к предыдущему контексту. При необходимости вы можете полностью изменить контекст.

.card  
.featured &  
/* .featured .card */ 
> 
>

Символ & представляет собой ссылку на объект селектора (не строку) и может быть размещён в любом месте вложенного селектора. Его даже можно разместить несколько раз:

.card  
.featured & & &  
/* .featured .card .card .card */ 
> 
>

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

Недопустимые примеры вложения

Есть несколько недопустимых сценариев вложенного синтаксиса, которые могут вас удивить, если вы применяли вложенность в препроцессорах. Шпаргалку по допустимому синтаксису вложенности можно найти в разделе Понимание парсера вложенности в этой статье.

Имена тэгов вложенных элементов

В настоящее время HTML элементы требуют наличия символа & впереди или в обёртке с помощью :is() .

.card  
h1  
/* �� h1 не начинается с символа & */ 
> 
>

Исправлено с таким синтаксисом:

.card  
& h1  
/* ✅ теперь h1 начинается с символа & */ 
> 
 
/* or */ 
 
:is(h1)  
/* ✅ теперь h1 обёрнут в :is() */ 
> 
>

Вложение и конкатенация

Многие соглашения об именах CSS классов рассчитывают на то, что вложенность может объединять и добавлять селекторы, как если бы они были строками. Это не работает в CSS вложенности, поскольку селекторы не являются строками, это ссылки на объекты.

.card  
&--header  
/* это не равно ".card--header" */ 
> 
>

Более подробное объяснение можно найти в спецификации

Смешивание вложенности и объявлений

Рассмотрим следующий вложенный CSS блок:

.card  
color: green; 
&  color: blue; > 
color: red; 
>

Цвет элемента .card будет blue .

Любые объявления смешанных стилей поднимаются вверх, как если бы они были созданы до того, как произошло какое-либо вложение. Подробнее можно узнать в спецификации.

Понимание парсера вложенности

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

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

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

Обнаружение возможности

Есть два отличных способа обнаружить вложенность CSS: использовать вложенность или использовать @support для проверки возможности синтаксического анализа селектора вложенности.

html  
.has-nesting  
display: block; 
> 
 
.no-nesting  
display: none; 
> 
>

@supports (selector(&))  
/* Парсинг вложенности доступен */ 
>

У моего коллега Bramus есть отличный CodePen, показывающий эту стратегию.

Отладка с помощью Chrome DevTools

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

В Chrome 113 планируется дополнительная поддержка Вложенности CSS. Следите за обновлениями.

Будущее

CSS Nesting/Вложенность есть только в версии 1. В версии 2 будет больше синтаксического сахара и, возможно, меньше правил для запоминания. Существует много требований, чтобы парсинг вложенности не был ограничен, чтобы не было списка символов, которые активируют парсер.

Вложенность — это большое улучшение языка CSS. Это имеет отношение к разработке почти каждого архитектурного аспекта CSS. Это большое влияние необходимо тщательно изучить и понять, прежде чем можно будет эффективно определить версию 2.

В качестве заключительной мысли, вот демонстрация, использующая @scoop , вложенность и @layer все вместе. Всё это очень захватывающе!

Вложенность CSS, специфика и вы

От автора: вложенность CSS скоро появится в браузерах. С помощью вложенности, с которой вы, возможно, знакомы по Sass или Less, вы можете значительно сократить количество повторяющихся селекторов. Но вы также можете загнать себя в угол, если не будете осторожны. Это обзор того, как вы уже можете использовать ее сегодня, подводных камней и того, как их избежать.

Как выглядит вложенность CSS?

Если вы работали в Sass или Less, возможно, вы знакомы с вложенностью, которая выглядит следующим образом:

background : #fff ;
color : red ;

Тот же самый блок, написанный с помощью вложенного CSS, выглядит так:

background : #fff ;
color : red ;

Вы заметили & перед p? Это «селектор вложенности», который сообщает браузеру, что вы хотите вложить p в div. Вы можете добавить селектор вложенности только в начале. У нас также есть такая возвожность в Sass, но это нужно только тогда, когда вы хотите добавить что-то в предыдущий селектор, например, класс:

background : #fff ;
color : red ;

И это на самом деле точно так же, как и при вложении собственного CSS. Думайте об этом так, как будто & просто необходим для каждого селектора. Помните, что в CSS, & всегда на первом месте.

Теперь есть способ разместить & где-нибудь еще, и это благодаря правилу вложенности @nest. Добавив к селектору префикс @nest, вы можете выбрать, где вы хотите разместить селектор.

background : #fff ;
@nest section & < color : red ;

В приведенном выше коде вы не придаете секции красный цвет, но вы создаете новый селектор section div (& заменяется селектором над ним), который имеет стиль css.

Вы можете добавлять селекторы вложенности только после вашего обычного CSS. Любые свойства CSS после селектора вложенности будут проигнорированы. Таким образом, следующее неверно:

background : #fff ;
color : red ;
border : 1px solid ;

Наконец, вы также можете вкладывать медиа-запросы, убедившись, что вы используете селектор вложенности для перезапуска блока «набора правил».

flex-direction : column ;
@media (min-width: 40rem) < flex-direction : row ;

Как и раньше, & будет заменен родительским селектором, поэтому приведенный выше код будет тем же CSS, что и этот:

flex-direction : column ;
@media (min-width: 40rem) < flex-direction : row ;

Используем вложенность сегодня с postcss-preset-env

Вложенность CSS еще не поддерживается во всех браузерах, но если вы используете PostCSS, вы можете установить плагин PostCSS Preset Env, и PostCSS преобразует вложенный CSS в CSS, который сегодня понятен браузерам.

Чтобы использовать PostCSS, вам понадобится этап сборки, например, с помощью Webpack, Parcel или Gulp. Вы можете найти обзор настроек в документации PostCSS по использованию, так что выберите тот, который вам подходит.

Чтобы поиграть с предустановленным Env PostCSS, посетите их площадку, которая компилирует код на лету.

Простой способ начать работу с postcss-preset-env в вашем проекте — использовать интерфейс командной строки, установив PostCSS CLI и postcss-preset-env:

JavaScript
npm install postcss postcss — cli postcss — preset — env — save — dev

И создадим файл postcss.config.js, который выглядит так:

JavaScript
const postcssPresetEnv = require ( ‘postcss-preset-env’ ) ;
module . exports = < postcssPresetEnv ( )

Затем запустите postcss в терминале из той же папки, что и ваш файл конфигурации.

JavaScript
postcss path /to/i nput . css — o path / to / output . css

Вот как вы можете использовать это сегодня, но когда вы это делаете, есть кое-что, о чем нужно знать, и это специфичность.

Специфичность: большая ловушка

Чтобы понять, что здесь происходит, я должен признать, что в приведенных выше примерах вложенности я сделал вещи немного проще, чем они есть на самом деле. Браузер оборачивает селектор is() вокруг любого родительского селектора, и в этом есть своя специфичность.

Селектор is()

Если вы не знакомы с ним (он относительно новый) — селектор is() позволяет вам обернуть кучу разных селекторов, чтобы предотвратить дублирование:

font-family : fantasy ;
main :is(h1, h2, h3) < font-family : fantasy ;

Два примера дают один и тот же результат, но обратите внимание, что во втором примере мы написали «main» только один раз, тогда как в первом примере нам пришлось написать его три раза. Когда дело доходит до специфичности, селектор :is() получает свою специфичность от самого определенного элемента в списке.

Незнакомы со специфичностью?

Если элементу задано несколько селекторов, браузер использует специфичнось селектора, чтобы определить, какой стиль применить. Каждый селектор имеет специфичность, которая определяется тем, что вы используете в этом селекторе: элементы, идентификаторы, классы и т. д.

Обычно это выглядит как три корзины, вот так: 1.2.3. Первая — это количество идентификаторов, вторая — количество классов, псевдоклассов и селекторов атрибутов, а последняя содержит элементы и псевдоэлементы.

Одно значение на более высоком уровне важнее, чем все уровни ниже него. Например, у вас может быть один селектор с 1000 именами классов и один селектор с одним идентификатором, последний все равно будет более определенный.

Если вы хотите лучше почувствовать специфичность, я построил калькулятор специфичности CSS, который поддерживает селекторы вплоть до уровня 5. Введите свои селекторы и посмотрите, какой специфичностью они обладают.

Вернемся к селектору :is()

В нашем примере :is(h1, h2, h3) специфичность невысока 0.0.1, так как там только элементы. Но для селектора :is(#start, h1) специфичность :is() резко возрастает 1.0.0 из-за идентификатора.

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

К сожалению, это означает, что вы можете получить очень специфичные селекторы CSS и не знать об этом!
Например, давайте посмотрим на этот «простой» пример списка новостей. Поскольку они сами по себе составляющие, имеет смысл держать их вместе.