Selecting a parent element has long been impossible to do using just CSS, but a pseudo-class, :focus-within, changes that story somewhat. It allows to style an element when it has focus, but also when any of its inner elements (descendants) have focus. A prime example is with a form where you’d want a container element to be styled a certain way when the user focuses into one of the input elements.
Here’s an example of using :focus-within with a form. Let’s start with this markup:
<form tabindex="0" class="myForm">
<h3>What's your favorite color?</h3>
<input type="text">
</form>
Copy
And our CSS rules are the following:
.myForm:focus-within {
background: #f8f8f8
repeating-linear-gradient(
45deg,
transparent,
transparent 35px,
rgba(255, 255, 255, 0.5) 35px,
rgba(255, 255, 255, 0.5) 70px
);
}
.myForm:focus-within::before {
content: "I'm a happy selected form!";
color: rgb(239, 187, 53);
}
#css