Always wanted to style parent based on what’s inside? CSS :has() makes it possible – no JavaScript needed.
Example – Highlight Card If It Has Sale Badge:
/* Style card differently if it contains .sale badge */
.card:has(.sale) {
border: 3px solid red;
background: #fff3f3;
}
More Examples:
/* Form with errors gets red border */
form:has(.error) {
border-color: red;
}
/* Article with images gets wider */
article:has(img) {
max-width: 900px;
}
/* Checkbox checked = show extra content */
.settings:has(input[type="checkbox"]:checked) .advanced {
display: block;
}
Browser Support: 90% (Chrome 105+, Safari 15.4+, Firefox 121+)