Сложные css селекторы: Комплексные селекторы | WebReference

Псевдоклассы

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

 a:hover {
  текстовое оформление: нет;
}
 

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

Объединение нескольких расширенных селекторов

Мы также можем использовать несколько расширенных селекторов в одном правиле. Проверьте это:

 .peeka:hover + .boo {
  дисплей: блок;
}
 

Мы используем соседний селектор с псевдоклассом . Результат? При наведении курсора на элемент с классом peeka этот стиль будет применен к элементу с классом boo сразу после него.

Дополнительные ресурсы

• Для получения дополнительной информации см. Комбинаторы и группы селекторов статья из серии MDN Введение в CSS .

Руководство по продвинутым селекторам CSS — часть первая

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

Вероятно, вы хорошо знакомы с созданием селекторов CSS на основе идентификаторов, классов и типов элементов. И вы, вероятно, часто использовали символ скромного пробела для выбора потомков.

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

Часть первая (эта статья):

• Специфика CSS и каскад
• Селектор универсальный — *
• Селектор атрибутов — [атрибут]
• Детский комбинатор — >
• Общий комбинированный комбинатор — ~
• Смежный одноуровневый комбинатор — +

Часть вторая:

• Псевдоклассы — например: :checked / :focus
• Псевдоэлементы — например: ::before / ::after
• Дополнительные ресурсы

Специфика CSS и каскад

Ключевой концепцией для успешной настройки селекторов CSS является понимание того, что известно как специфика CSS, и «C» в CSS, что является каскадом.

Специфичность — это вес, который применяется к данному объявлению CSS, определяемый номером каждого типа селектора в соответствующем селекторе. Когда несколько объявлений имеют одинаковую специфичность, к элементу применяется последнее объявление, найденное в CSS. Специфичность применяется только тогда, когда один и тот же элемент предназначен для нескольких объявлений. Согласно правилам CSS, непосредственно целевые элементы всегда будут иметь приоритет над правилами, которые элемент наследует от своего предка. — Документы MDN

Правильное использование специфичности каскада и селектора означает, что вы сможете полностью избежать использования !important в своих таблицах стилей.

Повышение специфичности происходит в результате переопределения наследования от каскада.

В качестве небольшого примера — какого цвета будет .item ?

 
 
 Элемент 
 
 

 #specific . item { 
 цвет: красный; 
 } 
 диапазон.элемент { 
 цвет: зеленый; 
 } 
 
 .item { 
 цвет: синий; 
 } 
 

.item будет красным , потому что специфичность включения #id в селектор выигрывает у каскада и над селектором элемента.

Это не означает добавлять #ids ко всем вашим элементам и селекторам, а скорее осознавать их влияние на специфичность.

Ключевая концепция : Чем выше специфичность, тем труднее обойти правило.

Каждый проект уникален по своим потребностям с точки зрения повторного использования правил. Желание поделиться правилами с низкой специфичностью привело к появлению фреймворков, основанных на утилитах CSS, таких как Tailwind и Bulma.

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

Если вы думаете: «Мне не нужно их изучать, потому что я использую фреймворк/систему дизайна», то вы сильно ограничиваете себя в плане использования CSS в полной мере.

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

Универсальный переключатель

Универсальный селектор — * — назван так потому, что применяется ко всем элементам универсально.

Раньше были рекомендации против его использования, особенно в качестве потомка, из-за проблем с производительностью, но это больше не является действительным соображением. На самом деле, это не было проблемой более десяти лет. Вместо этого позаботьтесь о размере вашего пакета JS и об оптимизации изображений, а не об улучшении селекторов CSS из соображений производительности 😉

Лучшая причина использовать его с осторожностью заключается в том, что он имеет нулевую специфичность при использовании сам по себе, что означает, что его можно переопределить с помощью одного селектора идентификатора, класса или элемента.

Практическое применение универсального селектора

Сброс блочной модели CSS

Мое наиболее частое использование в качестве моего самого первого правила сброса CSS:

 *, 
 *::before, 
 *::after { 
 box-sizing: border-box; 
 } 

Это означает, что мы хотим, чтобы все элементы включали отступов и границ в расчете блочной модели вместо добавления этих значений ширины к любым определенным размерам. Например, в следующем правиле .box будет иметь ширину 200 пикселей , а не 200 пикселей + 20 пикселей от заполнения:

 .box { 
 ширина: 200 пикселей; 
 отступ: 10 пикселей; 
 } 

Вертикальный ритм

Другое очень полезное приложение было рекомендовано Энди Беллом и Хейдоном Пикерингом на их сайте и в книге Every Layout и называется «Стек», который в самом простом виде выглядит так:

 * + * { 
 margin-top: 1. 5rem; 
 } 

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

Если вы хотите быть немного более — ну, избирательным — тогда мне нравится использовать его в качестве потомка в определенных обстоятельствах, таких как следующие:

 ст*+h3 { 
 margin-top:4rem; 
 } 

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

Селектор атрибутов

Это чрезвычайно мощная категория, но часто не используется в полной мере.

Знаете ли вы, что можно добиться результатов сопоставления, аналогичных регулярному выражению, используя селекторы атрибутов CSS?

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

Давайте посмотрим на примере:

 [класс*="компонент_"] 

Этот селектор выберет все элементы, класс которых содержит строку «component_», что означает, что она будет соответствовать «component_title» и «component_content».

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

 [класс*="component_" я] 

Но вам не нужно указывать значение атрибута, вы можете просто проверить его наличие, например:

 а[класс] 

Что бы выбрать все a (элементы связи), которые имеют любое значение класса .

Просмотрите документы MDN для всех возможных способов сопоставления значений в селекторах атрибутов.

Практическое применение селекторов атрибутов

Помощь в анализе специальных возможностей

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

 img:not([alt]) { 
 контур: 2 пикселя сплошной красный; 
 } 

Это добавит контур ко всем изображениям, которые не включают 9Атрибут 0031 alt .

Присоединение к Aria для обеспечения специальных возможностей

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

Одним из примеров является реализация взаимодействия аккордеона, когда вам нужно включить следующую кнопку, независимо от того, переключается ли логическое значение aria через JavaScript:

 Переключить 

Связанный CSS может затем использовать aria-expanded в качестве селектора атрибутов вместе с соседним родственным комбинатором, чтобы открыть или закрыть связанное содержимое:

 button[aria-expanded="false"] + .content { 
 /* скрытые стили */ 
 } 
 button[aria-expanded="true"] + .content { 
 /* видимые стили */ 
 } 

Стилизация некнопочных навигационных ссылок

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

 навигация: не ([класс]) 

Удалить стиль списка по умолчанию

Еще один совет, который я начал использовать от Энди Белла и его современного сброса CSS, заключается в удалении стиля списка на основе наличия атрибута роли :

 /* Удалить стили списка для элементов ul, ol с ролью списка, 
 что предполагает удаление стилей по умолчанию */ 
 ul[role="list"], 
 ol[role="list"] { 
 list-style : никто; 
 } 

Детский комбинатор

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

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

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

✅ Выбрано с статьей > стр

 
 
 
Привет, мир
 
 
 

🚫 Не выбрано с артикулом > p

 
 
 
 
 
Привет, мир
 
 
 
 
 

Практическое применение детского комбинатора

Вложенные ссылки списка навигации

Рассмотрим список навигации на боковой панели, например, для сайта документации, где есть вложенные уровни ссылок. Семантически это означает внешний ul , а также вложенный ul внутри li .

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

 nav > ul > li > a { 
 вес шрифта: полужирный; 
 } 

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

Селекторы элементов области видимости

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

В этом случае вы можете изменить footer на body > footer .

Стилизация встроенного/стороннего контента

Иногда вы действительно не можете контролировать имена классов, идентификаторы или даже разметку. Например, для рекламы или другого контента на основе JavaScript (не iframe).

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

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

Комбинатор общего назначения

Общий комбинатор родственных элементов — ~ — выбирает определенные элементы, расположенные где-то после предшествующего (ранее определенного) элемента и находящиеся внутри одного и того же родителя .

Например, p ~ img будет стилизовать все изображения, расположенные где-то после абзаца, при условии, что они имеют одного и того же родителя.

Это означает, что будут выбраны все следующие изображения:

 
 
 
Абзац
 
  
Заголовок 2
 
  png" alt="Image" /> 
 
Заголовок 3
  
  
 
 

Но , а не изображение в этом сценарии:

 
 
  
 
Абзац
 
 
 

Скорее всего, вы хотели бы быть немного более конкретным (см. также: смежный комбинатор родственных элементов), и этот селектор, как правило, чаще всего используется в творческих упражнениях по программированию, таких как моя игра CommitSweeper на чистом CSS.

Практическое применение универсального одноуровневого комбинатора

Визуальная индикация изменения состояния

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

Учитывая следующий HTML-код для флажка:

  
 Я принимаю условия 
  

Мы можем изменить стиль абзацев терминов, используя общий комбинатор родственных элементов , только когда установлен флажок:

 #terms:checked ~ p { 
 стиль шрифта: курсив; 
 цвет: #797979; 
 } 

Вариации с низкой специфичностью

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

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

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

 img ~ * { 
 размер шрифта: 0.9rem; 
 цвет: #797979; 
 поля: 1rem 1rem 0; 
 } 

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

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

Кроме того, поскольку оно применяется только в том случае, если элементы являются общими прямыми потомками родительского элемента изображения (в данном случае это li ), после переноса содержимого в другой элемент правило будет применяться только до тех пор, пока наследование не будет использоваться дочерними элементами. Чтобы лучше понять это, попробуйте обернуть содержимое последнего элемента карточки в div. Цвет и поля будут унаследованы на div и элементы type, но собственный стиль браузера для h4 предотвращает наследование размера шрифта из общего родственного комбинатора, поскольку собственное правило браузера имеет более высокую специфичность, чем универсальный селектор, который технически нацелен на . раздел .

Соседний одноуровневый комбинатор

Комбинатор соседнего элемента — + — выбирает элемент, который следует непосредственно за предшествующим (ранее определенным) элементом.

Мы уже использовали это в примерах универсального селектора — * + * — чтобы применить верхнее поле только к элементам, которые следуют за другим элементом — так что давайте перейдем к другим примерам!

Практическое применение смежного комбинатора одноуровневых элементов

Polyfill For Lack для поддержки Flexbox Gap в навигации

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

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

 nav ul li + li { 
 margin-left: 2rem; 
 } 

Что обеспечивает эффект разрыва между элементами списка без необходимости очищать дополнительное поле для первого:

Применение интервалов между метками формы и входными данными

Теория, применяемая в «стеке», который мы исследовали для универсальных селекторов, заключается в применении поля только в одном направлении.

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

 label + input { 
 margin-top: 0.