Explanation of the specific usage of CSS :focus-within

This article mainly introduces relevant information on the specific use of CSS :focus-within, which has certain reference value. Interested friends can refer to it

The world of CSS is really a magical world . Many front-end developers may have heard of :focus but not :focus-within. So what the hell is :focus-within? In this article, we will talk about :focus-within.

:What is focus-within

In CSS: focus-within is a pseudo-class, which has now been included in the CSS selector (CSS Level 4 selector). It's like you know :focus or :hover . :focus-within is very convenient for handling the focus state. Elements with the :focus-within pseudo-class are effective when the element itself or one of its descendants has focus.

If the text is difficult to understand, let's look at a simple example first:

<p class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</p>

The above is a simple form with an input form control.

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}

.form-group:focus-within {
    border-color: #000;
}

In the above example, when .form-group gets focus, the border-color color is changed to #000. But this does not mean receiving keyboard focus, that is because

does not necessarily get keyboard focus and tabindex is not set. Or if the link or input element in p receives focus, then the .form-group element will change the border color.

Seeing the above example, don’t you think it’s amazing? To achieve similar effects in the past, we needed to use JavaScript scripts. Through the mouse or keyboard events of the descendant elements of .form-group, and then add the corresponding style to its parent element (or ancestor element).

:Usage scenarios of focus-within

:focus-within is very powerful, mainly because the pseudo-class will be activated when any of its elements obtains focus. . Use this pseudo-class with caution when the element contains many subcomponents.

With :focus-within, some common interactive behaviors have become very simple, especially the interactive behaviors that previously required JavaScript keyboard events, we can use :focus-within instead.

Next, let’s look at some common examples of :focus-within.

Highlighting of table rows

A common example is the behavior of table row highlighting, that is, when the mouse is hovering over the rows of the table, the color becomes highlighted . This interactive style can help visually impaired users better read a complex table or long form. Because of the highlighting, these users can more easily keep track of the table row they are currently reading. The way that was often implemented in the past was to use :hover to change the style of table rows. This solution is an easy task for normal users, but if your users have difficulty operating the mouse, then :hover It's a bit painful. If you're looking for perfection, you might add styles to table rows via JavaScript keyboard events.

So with :focus-within, we can say goodbye to JavaScript. We can style it like this:

The above example shows how to use :focus-within to highlight an entire row of a table. If there is an element available that can get focus in a particular table row, this refers to getting focus via the keyboard. For example, in the above example, there is an element in the table. You know, the a element can get focus through the keyboard.

At this time you only need to add in the style:

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

Drop-down menu

The drop-down menu is ours One of the most common web components. When I first saw the :focus-within pseudo-class, the first use case that came to mind was drop-down menus.

In the above example, JavaScript is used to track the user's keyboard focus in a navigation drop-down menu. If JavaScript detects that keyboard focus is on a link, add a .has-focus class to .nav__list_drop. When li has the .has-focus class, its child elements will be displayed, that is, the drop-down menu will be displayed.

For this effect, we can directly replace the function of JavaScript script through :focus-within. Use .nav__list__drop:focus-within instead of .nav__list__drop.has-focus . Drop-down menus appear when you manipulate the keyboard to give focus to a drop-down menu item.

.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

Off-screen Nav