Знаете ли вы о CSS селекторе: has?

Знаете ли вы о CSS селекторе: has?

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

Прежде чем я все это объясню, давайте рассмотрим пример:

Хотя сегодня такой код и не поддерживается ни в одном браузере, эта строка CSS изменит фон div только в том случае, если в нём есть абзац. Итак, если есть div без абзацев, стили не будут применяться. Это довольно удобно и в то же время исключительно странно, правда? Вот еще один пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Этот CSS будет применяться только тогда, когда за div непосредственно следует другой div. Я думаю о селекторе :has так: это псевдокласс родительского селектора. На языке CSS это означает, что «он позволяет вам изменить родительский элемент, если у него есть дочерний или другой элемент, следующий за ним». Для меня это настолько странно, потому что это противоречит модели работы CSS. Вот как я привык думать о CSS:

Вы можете стилизовать только вниз, от родителя к потомку, но не в обратном порядке. Селектор :has полностью меняет это, потому что до сих пор в CSS не было родительских селекторов, и на то есть несколько веских причин. Из-за того, как браузеры анализируют HTML и CSS, выбор родителя при соблюдении определенных условий может привести к разного рода проблемам с производительностью.

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотя :has сейчас не поддерживается в браузерах (вероятно, по причинам производительности), он является частью спецификации CSS Selectors Level 4, которая является той же спецификацией, в которой имеется чрезвычайно полезный псевдо-класс :not. В отличие от :has, у селектора :not довольно приличная поддержка браузера, и на днях я впервые использовал его:

Это здорово, мне также нравится, насколько это читаемо; вам достаточно взглянуть на эту строчку кода, чтобы понять, что она делает. Другой способ, в котором вы можете использовать селектор :not — это поля:

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

CSS Selectors Level 4 — это та же спецификация, в которой есть селектор :is, его сегодня можно использовать во многих браузерах:

Вот и все! Селектор :has может быть бесполезен сегодня, но его братья :is и :not могут быть сказочно полезными, и это только крошечная часть — всего три псевдокласса CSS — которые доступны в новой спецификации.

Автор: Robin Rendle

Источник: css-tricks.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.