Селектор Has в CSS

Это селектор, который я давно ждал!

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

Один быстрый пример, который возник на моем собственном сайте, — это стилизация имен файлов, которые я располагаю над фрагментами кода.

Они имеют следующий формат:

<p>hoc.y</p>
<pre>
...
</pre>
Войти в полноэкранный режим Выйти из полноэкранного режима

Я хочу иметь возможность стилизовать теги p, за которыми следует pre. Остальные p-теги должны быть оставлены в покое.

Теперь с помощью селектора has это возможно!

p:has(+ pre) {
    font-style: italic;
    margin-bottom: 5px;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это стилизует только те теги p, за которыми следует pre.

Вы можете начать использовать это, но в настоящее время оно находится в бета-версии Chrome для версии 105, а Firefox все еще закрыт за опцией about:config, но я пока не смог заставить его работать.

Ссылка на MDN:

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Ссылка на Chrome:

https://www.google.com/chrome/beta/

Оцените статью
devanswers.ru
Добавить комментарий