Skip to Content

:focus-within

The :focus pseudo selector is useful, but it only allows us to style something which has focus directly on it. What if we want to style the parent of the thing with focus?

The common example you’ll find is changing the background, or border, of a form when someone goes inside it:

form:focus-within {
  background: limegreen;
}

With the above code, as soon as someone either clicks or tabs into an input, the background of the entire form will change!

While I think this is awesome, and is something I’m looking at implementing into my site when I redesign it, the perhaps most useful example I’ve come across yet is allowing us to make a CSS only dropdown menu that doesn’t rely on :hover!

Don't want to miss an article?

I share the cool little things I run across (like you're reading in this post right now) every Sunday. Sign up below to never miss a post.

    I won't send you spam. Unsubscribe at any time.

    Here is a snippet of how I might use it, go and checkout this Codepen where I put it to use 🙂

    .nav__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  background: white;
}

.nav__list-item:focus-within .nav__dropdown-list {
  display: block;
}

    Browser support

    As you might have been acustomed to with these emails, browser support is… questionable. So be careful using it. Depending on the usecase though (say, highlighting a form), it can degrade gracefully, but if you’re using it for a dropdown menu you might want to consider JS still. You can also checkout this polyfill.