The `:focus-within` Pseudo Class

§

Today I came across the a new CSS pseudo class that will be very handy for web developers who are styling focus states.

The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.

Take for example the following HTML code:

<div class="container" tabindex="0">
  <label for="text">Enter text</label>
  <input id="text" type="text" />
</div>
										

and the following CSS:

.container:focus-within {
 ...

Read the entire article at the source link…




We’re happy to share this resource that we found. The content displayed on this page is property of it’s original author and/or their organization.




Leave a Reply

You must be logged in to post a comment.