Найти тему
FRONTEND FLOW

[CSS] Селектор :has()

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

Синтаксис селектора :has выглядит следующим образом:

-2

где parent - это родительский элемент, а child - дочерний элемент, который нужно выбрать.

Например, с помощью селектора :has можно выбрать все div-элементы, которые содержат ссылку (<a>):

-3

Также можно использовать более сложные условия, например, выбрать все div-элементы, которые содержат изображение (<img>), имеющее атрибут alt со значением "логотип":

-4

Вы даже можете задавать стили в определенных состояниях, например пропишем какие-либо стили для div-элементов в моменте, когда ссылка (внутри div) получила состояние focus

-5