Q22: What is the :has() parent pseudo-class selector in CSS?
The :has() pseudo-class (known as the CSS parent selector) selects parent elements based on whether they contain specific descendant elements or matching state selectors (e.g., card:has(img) or form:has(:invalid)).
Form Styling via :has()
/* Styles form when any child input is invalid */
form:has(input:invalid) {
border: 2px solid red;
}
/* Styles cards containing hero images */
.card:has(img.hero) {
grid-column: span 2;
}💡 :has checks child presence and updates parent container styles dynamically.
Key Takeaways
- Acts as a relational CSS parent selector.
- Styles containers based on descendant child elements or active form states.
Knowledge Check
Which selector targets an <a> anchor tag only when it contains an internal <img> tag?