CSS Selector :focus-within. When and how should I use it?
# CSS Selector :focus-widthin
Among CSS selectors :focus-within exists :focus-within is used in form elements and is a very useful choice to style the focused element of visitors. Features include ease of style when used with the parent element until it is focused on the inner child element.

element:focus-in { color: red; }


The method used is the same as the other selector method. You can add it to the element and add the desired property value. So here's a simple example.


! :focus-within Example View
So let's make a quick example and see how you can change your style if you focus on that element. First, create a form element and add a simple input form inside.
<div class="test-parent">
  Hello. This is a world best website, <b>webisfree.com</b>.<br />
  Visit and Enjoy free.
  <input type="text" />
</div>

Even if you are not a form tag, you can apply other tags such as div tags as above if you are focusing on tags such as input and select, which are input forms. Now, if you're focusing on an internal input tag, let's change the background color of the form tag to green and the font color to white.
.test-parent:focus-within {
  background: green;
  color: #fff;
}

The code is now complete. Let's see if it's actually

! Focus it on yourself. Check it out
Below is an example of the above. Click or move to the internal input form to focus. You can see if the style changes.

<div class="test-parent">
  Hello. This is a world best website, <b>webisfree.com</b>.<br />
  Visit and Enjoy free.
  <input type="text" />
</div>
<style>
.test-parent:focus-within { background: green; color: #fff; }
</style>


You can see that the background color and font color have changed. So far, we've identified the choice of a : focus-within at css.