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

Синтаксис

Ассоциация :has() Псевдокласс CSS помогает стилизовать элемент, если что-то из того, что мы ищем внутри него, обнаружено и учтено. Это все равно, что сказать: «Если внутри этого ящика есть что-то особенное, то оформите его так И только так».

:has(<direct-selector>) {
  /* ... */
}

«Функционал :has() Псевдокласс CSS представляет элемент, если какой-либо из относительных селекторов, передаваемых в качестве аргумента, соответствует хотя бы одному элементу, привязанному к этому элементу. Этот псевдокласс предоставляет способ выбора родительского элемента или предыдущего родственного элемента относительно ссылочного элемента, принимая в качестве аргумента относительный список селекторов».

Для более убедительного объяснения, MDN делает это идеально

Проблема стиля

Раньше у нас не было возможности стилизовать родительский элемент на основе прямого дочернего элемента этого родителя с помощью CSS или элемента, основанного на другом элементе. Если бы нам пришлось это сделать, нам пришлось бы использовать JavaScript и включать/выключать классы в зависимости от структуры HTML. :has() решил эту проблему.

Допустим, у вас есть элемент заголовка уровня 1 (h1), то есть заголовок сообщения или что-то в этом роде на странице списка блога, а затем у вас есть заголовок уровня 2 (h2), который следует непосредственно за ним. Этот h2 может быть подзаголовком поста. Если это h2 присутствует, важен и непосредственно после h1, возможно, вы захотите выделить этот h1. Раньше вам приходилось писать функцию JS.

Старый добрый путь – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Эта функция JS ищет все h1, у которых есть h2 продолжив его и применив класс Highlight-Content, чтобы сделать h1 выделиться как важная статья.

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

Новый школьный путь – CSS

h1:has(+ h2) {
    color: blue;
}

Добавьте сюда немного :has()!

Теперь вы можете использовать :has() чтобы добиться того же, что и функция JS. Этот CSS проверяет наличие любого h1 и использует одноуровневый комбинатор проверяет h2, который следует сразу за ним, и добавляет к тексту синий цвет. Ниже приведены несколько случаев использования, когда :has() может пригодиться.

:has Пример селектора 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:has Пример селектора 2

Часто мы, сотрудники Интернета, манипулируем изображениями или работаем с ними. Мы могли бы использовать инструменты, которые Облачный позволяет использовать различные преобразования наших изображений, но обычно мы хотим добавить тени, радиусы границ и подписи (не путать с альтернативным текстом в атрибуте alt).

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

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Могу я :has() что?

Ты это видишь :has() имеет отличную поддержку в современных браузерах.

:has() в обществе!

Я обратился к своей сети в Твиттере, чтобы узнать, как мои коллеги используют :has() в своей повседневной работе, и вот что они об этом сказали.

«Один из примеров, который у меня есть, — это стилизация определенного SVG из стороннего пакета в @saucedopen потому что я не мог напрямую его стилизовать».

Это то, что Ник Тейлор от Открытый соус должен был сказать об использовании :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

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

Эбби Перини от Nexcor Food Safety Technologies, Inc.

Приятно видеть, как члены сообщества используют современный CSS для решения реальных проблем, а также спасибо Abbey, использующему его из соображений доступности!

Что нужно держать в голове

При использовании следует учитывать несколько важных моментов. :has() Пункты списка, ссылки на которые взяты из МДН.

• Псевдокласс принимает специфику наиболее конкретного селектора в своем аргументе.
• Если же линия индикатора :has() сам псевдокласс не поддерживается в браузере, весь блок селектора завершится ошибкой, если :has() находится в прощающем списке выбора, например в :is() и :where()
• Ассоциация :has() псевдокласс не может быть вложен в другой :has() 
• Псевдоэлементы также не являются допустимыми селекторами внутри :has() и псевдоэлементы не являются допустимыми якорями для :has()

Заключение

Использование возможностей CSS, включая расширенные функции, такие как :has() псевдокласс, позволяет нам создавать исключительный веб-интерфейс. Сильные стороны CSS заключаются в его каскадности и специфике… самое лучшее, что позволяет нам использовать весь его потенциал. Используя возможности CSS, мы можем продвигать веб-дизайн и разработку вперед, открывая новые возможности и создавая революционные пользовательские интерфейсы.

Ссылки:

• SEO-контент и PR-распределение. Получите усиление сегодня.
• PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
• ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
• ПлатонЭСГ. Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
• ПлатонЗдоровье. Биотехнологии и клинические исследования. Доступ здесь.
• Источник: https://css-tricks.com/the-power-of-has-in-css/