Detailed explanation of the use of focus-within

This time I will bring you a detailed explanation of the use of focus-within. What are the precautions when using focus-within? The following is a practical case, let's take a look.

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 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.

After :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.

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

Drop-down menu

The drop-down menu is our most common One of the 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 .navlist_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 .navlistdrop:focus-within instead of .navlistdrop.has-focus . Drop-down menus appear when you manipulate the keyboard to give focus to a drop-down menu item.

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

Off-screen Nav

Off-screen Nav is a common effect on mobile terminals. Then we can also achieve this effect through :focus-within. For detailed code, you can see the following example:

Browser Compatibility

: focus-within Although it is very interesting, many students are worried about its compatibility. Through Caniuse, we can see the browser's support for it:

Summary

It's not surprising if you are familiar with :focus, but you know:focus-within If , it means that you are constantly paying attention to new features related to CSS. Of course this property refreshed the world of CSS again which is really weird. If you are interested, why not write the demo yourself. You will love this property.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

css3 text gradient animation

css3 making semicircular arc

How to use sticker-footer layout in css

The above is the detailed content of Detailed explanation of the use of focus-within. For more information, please follow other related articles on the PHP Chinese website!