:has() selects a parent based on its children: .card:has(img) selects cards containing images. form:has(:invalid) targets forms with invalid fields. It is the long-awaited CSS parent selector now in all modern browsers.
:has() — Parent Selector
/* Card with image gets different layout */
.card:has(img) {
display: grid;
grid-template-columns: 200px 1fr;
}
/* Form row with error */
.form-group:has(input:invalid) label {
color: red;
}
/* Nav item with dropdown */
nav li:has(ul) > a::after {
content: " ▾";
}