От автора: возможно, материал этой статьи пока может Вам и не пригодится, но я думаю, что селектор CSS :has будет иметь большое влияние на то, как мы будем писать CSS в будущем. Фактически, если он когда-либо появится в браузерах, это разрушит ментальную модель базовой работы CSS, потому что это будет первый пример родительского селектора в CSS.
Прежде чем я все это объясню, давайте рассмотрим пример:
|
1 2 3 |
div:has(p) { background: red; } |
Хотя сегодня такой код и не поддерживается ни в одном браузере, эта строка CSS изменит фон div только в том случае, если в нём есть абзац. Итак, если есть div без абзацев, стили не будут применяться. Это довольно удобно и в то же время исключительно странно, правда? Вот еще один пример:
|
1 2 3 |
div:has(+ div) { color: blue; } |
Этот CSS будет применяться только тогда, когда за div непосредственно следует другой div. Я думаю о селекторе :has так: это псевдокласс родительского селектора. На языке CSS это означает, что «он позволяет вам изменить родительский элемент, если у него есть дочерний или другой элемент, следующий за ним». Для меня это настолько странно, потому что это противоречит модели работы CSS. Вот как я привык думать о CSS:
|
1 2 3 4 5 6 |
/* Not valid CSS, just an illustration */ .parent { .child { color: red; } } |
Вы можете стилизовать только вниз, от родителя к потомку, но не в обратном порядке. Селектор :has полностью меняет это, потому что до сих пор в CSS не было родительских селекторов, и на то есть несколько веских причин. Из-за того, как браузеры анализируют HTML и CSS, выбор родителя при соблюдении определенных условий может привести к разного рода проблемам с производительностью.
Если отложить эти опасения в сторону, если я просто сяду и подумаю обо всех способах, которыми я мог бы воспользоваться сегодня используя :has, у меня бы заболела голова. Это откроет ящик пандоры возможностей, которые никогда не были бы возможны с одним только CSS.
Хорошо, последний пример: допустим, мы хотим применить стили только к ссылкам, в которых есть изображения:
|
1 2 3 |
a:has(> img) { border: 20px solid white; } |
Время от времени это было бы полезно. Я также вижу, что могу использовать :has для условного добавления полей и отступов к элементам в зависимости от их содержимого. Это было бы здорово.
Хотя :has сейчас не поддерживается в браузерах (вероятно, по причинам производительности), он является частью спецификации CSS Selectors Level 4, которая является той же спецификацией, в которой имеется чрезвычайно полезный псевдо-класс :not. В отличие от :has, у селектора :not довольно приличная поддержка браузера, и на днях я впервые использовал его:
|
1 2 3 |
ul li:not(:first-of-type) { color: red; } |
Это здорово, мне также нравится, насколько это читаемо; вам достаточно взглянуть на эту строчку кода, чтобы понять, что она делает. Другой способ, в котором вы можете использовать селектор :not — это поля:
|
1 2 3 |
ul li:not(:last-of-type) { margin-bottom: 20px; } |
Таким образом, каждый элемент, который не является последним, получает отступ. Это полезно, если у вас есть несколько элементов, например:
CSS Selectors Level 4 — это та же спецификация, в которой есть селектор :is, его сегодня можно использовать во многих браузерах:
|
1 2 3 4 5 6 7 8 9 10 11 |
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: #BADA55; } /* ... which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { color: #BADA55; } |
Вот и все! Селектор :has может быть бесполезен сегодня, но его братья :is и :not могут быть сказочно полезными, и это только крошечная часть — всего три псевдокласса CSS — которые доступны в новой спецификации.
Автор: Robin Rendle
Источник: css-tricks.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
