Focus vs Focus-Within

Today we're going to talk about a couple of different pseudo-classes. If you are unclear what a pseudo-class is I recommend starting with this post.

An Introduction to the Hover Pseudo-class

Laurie ・ Aug 27 '19 ・ 3 min read

#css #webdev #learning #beginners

Focusable elements

We're going to discuss focus and focus-within, but before we do it's worth reviewing what focusable means in the context of CSS.

An element is focusable if you can tap it, click it or tab to select. Good examples of this are form inputs and links.

The focus and focus-within pseudo-classes are both triggered when a user focuses on an element, albeit in different ways.

focus

Let's review focus first. This pseudo-class is applied to an element. When that element is in focus the styling appears.

Take this example of a list of inputs. Each input has its own id with a corresponding focus style.

Depending on which input you select, it will have the associated background-color.

Pay attention to the fact that this pseudo-class responds to an elements state and applies styling to that same element. For our next example, that won't be the case.

How is focus-within different?

Focus-within is assigned to a parent element. The styling rules are applied when any child element receives focus. Selecting an input, clicking a link, etc.

As it turns out, our list example from before is a good one to use. If we assume each input is the child then that makes li the parent. So let's add focus-within to our li elements. As in our previous example, we're actually adding an id and associating that with each li element.

If we click on an input we see that the surrounding element receives color.

So what's actually happening? The li element is looking at the input inside of it. When that input receives focus the styles are applied. However, since the rule is on the li element, the style is applied to the li element, even though the state change occurs in the input.

Make sense?

The "grandparent" element

Let's look at another example. li elements have yet another parent, ul. What if we applied our focus-within pseudo-class to that element?

If we click on an input inside the ul the style is applied to the ul element.

Conclusion

These are really neat CSS features, and understanding the difference between them will help you apply styles more directly. Can't wait to see what you make!