CSS псевдоклас :has - проверка наличия

Псевдокласс :has позволяет проверить, существует ли блок внутри родительского. Своеобразный if в CSS.

Предположим, есть следующая структура:

Если chid имеется, то углы бордюра parent нужно скруглить, в противном случае - оставить 90 градусов.

.parent
.child {
border: 1px solid blck;
border-radius: 0;
}

.parent:has(.child) {
border-radius: 16px;
}

Если нужно сделать наоборот, если нет child, то parent скруглить углы, то пишем

.parent:not(:has(.child)) {
border-radius: 16px;
}

Кроме этого, можно проверить, следует ли за parent child:

.parent:has(+ child) {}

Можно выбрать прямой дочерний элемент:

.parent:has(> child) {}

Можно проверить наличие сразу нескольких элементов:

.parent:has(.child, .sibling) {}

Проверка отмеченного чек-бокса:

.button-clear {
display: none;
}

.main-menu:has(input:checked) .button-clear {
display: block;
}

Также, можно обработать выбранное в селекторе значение:

.some-prm {
display: block;
}

form:has(option[value="some"]:checked) some-prm {
display: block;
}

Проверить наличие нескольких дочерних элементов (количественные запросы) и сделать что-либо с каким-то из них:

.child {
display: flex;
gap: 1em;
}

.parent:has(.child:nth-last-child(n + 3)) .child:last-child {
margin-left: auto;
}

последний элемент будет прижат к левому краю