Change parent element property on focus of child in CSS
I want to highlight parent element when someone hovers on child element. How to achieve this. For ex, when inner box is focused, then outer box color should change to green.
We can do this using CSS ":focus-within" pseudo class.
The :focus-within CSS pseudo-class will match an element if the element or any of its descendants are focused by user.
HTML:
<html>
<head>
<title>Focus within</title>
</head>
<body>
<div class="parent">
<input class="child" type="text" />
</div>
This is just an example tutorial.
</body>
</html>CSS:
.parent {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
}
.child {
width: 110px;
border: 1px solid green;
margin: auto;
}
.parent:focus-within {
background-color: green;
}Published on 22 JANUARY 2023 at 10:11
