CSS Focus-within with styling parent on child focus

TL;DR The article explains how to style parents based on child focus using the :focus-within pseudo-class in CSS. It provides examples of basic styling, multiple descendants, pseudo-classes vs pseudo-elements, and nesting with pseudo-classes. The article also discusses managing styles with CSS variables and highlights some common CSS tricks to watch out for when working with focus-within.

Unlocking the Power of CSS Focus-within: Styling Parents on Child Focus

As full-stack developers, we're no strangers to CSS. But have you ever struggled with styling elements when a child element gains focus? You're not alone! In this article, we'll delve into the fascinating world of focus-within and explore how to style parents based on child focus using various CSS techniques.

What is focus-within?

Before we dive in, let's cover the basics. The :focus-within pseudo-class is a relatively new addition to the CSS landscape (introduced in CSS Selectors Level 4). It allows us to target an element when any of its descendants have focus.

Basic Example: Styling Parents on Child Focus

Let's start with a simple example. Suppose we have a container div with a text input inside.

<div class="container">
  <input type="text" id="txtInput" />
</div>

We want to change the background color of the parent container when the child input gains focus. Using :focus-within, we can achieve this as follows:

.container:focus-within {
  background-color: lightblue;
}

Voilà! When you click on the input, the container's background changes.

Styling Based on Multiple Descendants

What happens when we have multiple child elements with focus? Can we style the parent based on multiple descendants gaining focus? Absolutely!

Consider a scenario where we have two inputs and a checkbox within our container.

<div class="container">
  <input type="text" id="txtInput1" />
  <input type="text" id="txtInput2" />
  <input type="checkbox" id="chkBox" />
</div>

We can use the :focus-within pseudo-class with a comma-separated list of child elements to style the parent when any of them gain focus.

.container:focus-within #chkBox,
.container:focus-within #txtInput1,
.container:focus-within #txtInput2 {
  background-color: lightblue;
}

However, this approach can get cumbersome with more complex selectors. We'll explore a better solution later.

Pseudo-class vs Pseudo-element

When working with focus-within, it's essential to understand the difference between pseudo-classes and pseudo-elements.

A pseudo-class is used to select an element based on certain conditions (e.g., focus, hover, or active). In our case, :focus-within is a pseudo-class that targets elements when their descendants have focus.

On the other hand, a pseudo-element is used to create an imaginary box around an element. Think of it as a virtual wrapper.

For example:

input:focus + .highlight {
  background-color: lightblue;
}

Here, :focus is a pseudo-class that targets the input element when it gains focus. The + selector then targets the adjacent .highlight element, which we can use to style accordingly.

Nesting with Pseudo-classes

Let's get creative! What if we want to nest pseudo-classes within each other? For instance, we have a container div with multiple child elements:

<div class="container">
  <input type="text" id="txtInput1" />
  <div class="child-container">
    <input type="checkbox" id="chkBox1" />
    <input type="radio" id="radButton" />
  </div>
</div>

We can use the :focus-within pseudo-class to style both the parent container and the child container when their descendants gain focus:

.container:focus-within {
  background-color: lightblue;
}

.child-container:focus-within {
  background-color: lightgreen;
}

However, be aware that this approach can lead to unexpected behavior. The :focus-within pseudo-class is a parent selector and will match the first element in the chain of descendant elements.

Styling Multiple Elements with CSS Variables

As our examples become more complex, managing styles becomes increasingly challenging. This is where CSS variables come to the rescue!

Let's revisit our previous example with multiple child elements:

<div class="container">
  <input type="text" id="txtInput1" />
  <div class="child-container">
    <input type="checkbox" id="chkBox1" />
    <input type="radio" id="radButton" />
  </div>
</div>

We can define CSS variables to store our styles and reuse them throughout the stylesheet:

:root {
  --focus-color: lightblue;
}

.container:focus-within,
.child-container:focus-within {
  background-color: var(--focus-color);
}

By using CSS variables, we've made our code more maintainable, scalable, and (dare I say it?) beautiful!

CSS Tricks to Watch Out For

As you experiment with focus-within, keep these CSS tricks in mind:

1. Use a comma-separated list of child elements: When working with multiple child elements, use a comma-separated list to style the parent container.

.container:focus-within #chkBox,
.container:focus-within #txtInput1,
.container:focus-within #txtInput2 {
  background-color: lightblue;
}

2. Beware of unexpected behavior: When using focus-within with multiple child elements, be aware that the pseudo-class will match the first element in the chain of descendant elements.
3. Use CSS variables to store styles: Reuse your styles across the stylesheet by defining CSS variables and referencing them throughout.

Conclusion

With this comprehensive guide on CSS focus-within, you're now equipped with the knowledge to style parents based on child focus like a pro! Remember to use pseudo-classes, pseudo-elements, and CSS variables to create complex yet maintainable styles.

As you continue to experiment with focus-within, we'd love to hear about your experiences. Share your success stories or ask questions in the comments below!

Stay tuned for more CSS tutorials and tricks on our blog!