Report this

What is the reason for this report?

The CSS :focus-within Pseudo-Class

Published on September 1, 2020
The CSS :focus-within Pseudo-Class

Introduction

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.

HTML and CSS Code

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>

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);
}

Working Demo

Below you can see the result if you’re using a supporting browser. Notice how the different background is applied to the containing form element when the form itself is focused or when either of the inputs are focused.

If we had used the good old :focus pseudo-class instead of :focus-within, our container form would be styled only when the focus is on the form itself, but not when the inputs are focused:

What's your favorite color?


Thanks to Lea Verou for the CSS background pattern.

Conclusion

In order for :focus-within to work as expected, you’ll have to make sure that the inner elements of the container are focusable. Input elements are focusable by default, but div, img or p elements, for example, are not. The tabindex attribute can be used to make an element focusable. The container element should also be focusable in order to receive the styling when focusing from just the container.

Browser Compatibility Check: As of 2020, all modern browsers support focus-within, but check Can I Use for detailed, version-specific browser support.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

Alligator
Alligator
Author
See author profile

Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.

Andy Hattemer
Andy Hattemer
Editor
Community Builder
See author profile

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.

Category:
Tags:
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Was this helpful?


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.