How to change parent styles on focus of child with CSS?

Spread the love

Sometimes, we want to change parent styles on focus of child with CSS.

In this article, we’ll look at how to change parent styles on focus of child with CSS.

How to change parent styles on focus of child with CSS?

To change parent styles on focus of child with CSS, we use the focus-within pseudoselector.

For instance, we write

.parent:focus-within {
  border: 1px solid #000;
}

to change the border styles of the element with class parent when we focus on any element inside the element with class parent.

Conclusion

To change parent styles on focus of child with CSS, we use the focus-within pseudoselector.

Leave a Reply

Your email address will not be published.