The magic selector: Focus-within

CSS pseudo-class selectors and pseudo-element selectors make CSS more powerful.

You hear a lot about pseudo-classes, maybe not so much about pseudo-elements, but CSS actually makes a distinction between these two.

It’s important to mention this every time you talk about pseudo-classes. Sometimes you’ll find two colons (:) instead of one colon (:) for pseudo-class elements. This is part of the CSS3 specification to distinguish pseudo-classes from pseudo-elements, and most browsers support these two representations.

In general,

#id:after{
 ...
}
Copy the code
#id::after{
...
}
Copy the code

For compliance, the single colon (:) is used for CSS3 pseudo-classes and the double colon (::) is used for CSS3 pseudo-elements.

There are exceptions, of course, for pseudo-elements that already exist in CSS2, such as :before, the single colon and double colon ::before work the same way.

Therefore, if your site only needs webKit, Firefox, Opera and other browsers or mobile pages, it is recommended to use double colons for fake elements, and if you have to support older Versions of Internet Explorer, it is safer to use CSS2 single colons.

Pseudo class selector:focus-within

Without further ado, today’s focus is the Focus-Within pseudo-class selector.

It indicates that an element gets focus, or that its descendants get focus. Focus, and it or its descendants gain focus.

This means that either it or its descendants can get focus :focus-within.

:focus-withinThe bubbling of

This property is a bit like the Javascript event bubble, bubbling from the focusable element all the way to the root HTML element, which can receive the :focus-within event, as in this simple example:

<div class="g-father">
    <div class="g-children">
        <input type="button" value="Button">
    </div>
</div>
Copy the codeCopy the code

html,
body,
.g-father,
.g-children {
    padding: 30px;
    border:1px solid #999;
}
input { ... &:focus { background: #00bcd4; }}
Copy the code
html:focus-within {
background: #e91e63;
}
body:focus-within {
background: #ff5722;
}
.g-father:focus-within {
background: #ffeb3b;
}
.g-children:focus-within {
background: #4caf50;
}
Copy the code

Here it is:

CodePen Demo — : focal-within Bubble trigger

The existence of this selector gives CSS the ability to persist elements in a new state.

Here are a few examples of what focus-Within can offer and what it can do.

Sensing user focus area

It or its descendants gain focus, which makes the perceived focus area larger, so the most common usage is to use focus-within to sense the user to operate on the focus area, highlighting reminders.

The following effect does not have any JS code:

What does that mean here? : What did Focus-Within do?

• We don’t have to set the focus element:focusI can set the parent element I want, so that when the element is in focus, I can control the style of its parent element as well

The core idea, expressed in CSS code, looks like this:

<div class="g-container">
    <div class="g-username">
        <input type="text" placeholder="user name" class="g_input" >
    </div>
    <div class="g-username">
        <input type="text" placeholder="code" class="g_input" >
    </div>
</div>
Copy the codeCopy the code

.g-container:focus-within {
    ...
input {
    ....
}
Copy the code
Copy the code
}

Copy the code
DEMO — CSS focus-within INPUT

Using the above ideas, we can make the effect a little bit more flashy and make some effects to enhance the user experience in certain scenes:


     

DEMO — PURE CSS FOCUS By :focus-within
TAB navigation switch
In a previous article, we introduced two simple CSS implementations of tab-navigation:
Pure CSS navigation Tab switching scheme
Now there is another way to use :focus-within can get the focus of the element in the parent node, to achieve the TAB navigation switch:


     

DEMO — focus-within switch tab
The main idea is to use the capture state to control the other selectors, and most importantly to use the parent :not(:focus-within) to set the default style:
.nav-box:not(:focus-within) {// Default style}
.nav-A:focus-within ~ .content-box .content-A {
display: block;
}
Copy the code
.nav-B:focus-within ~ .content-box .content-B {
display: block;
}
Copy the code
Cooperate with:placeholder-shownThe pseudo class implements the form effect

A person with limited ability will usually work well with other pseudo-classes. Placeholder -shown here is another interesting pseudo class.

: placeholder – to: The :placeholder-shown CSS pseudo-class represents any  or  element that is currently displaying placeholder text.


Also, to highlight, this pseudo-class is still in the laboratory scheme. That is, not included in the standard, but of course our goal is to find interesting CSS.

So this pseudo-class style is triggered when the input tag has a placeholder property and has text that’s placeholder by default. Work with: Not () pseudo-classes, which can then change the style when the default text disappears, and work with the main character of this article, we can implement a series of forms.
The CSS code looks something like this:
.g-container {
    width: 500px;
    height: 60px;
input { height: 100%; width: 100%; & :not(:placeholder-shown) { ... } & :placeholder-shown { ... } } & :focus-within { ... }Copy the code
Copy the code
}

Copy the code
The actual effect is as follows:


     

As you can see, the above effect does not use any JS and can be implemented:

The entire input (including the area where the parent element is located) is in focus and out of focus style control
Placeholder property Settings for text appear and disappear style control

CodePen Demo — :placeholder-shown && :focus-within
Realize off-screen navigation
This is a function that has been mentioned in many other articles. The off-screen navigation can be realized conveniently with focal-within, which can be said to give full play to the function of this attribute. Here I directly post the implementation scheme of this effect by Dannie Vinther on Codepen:


     

CodePen Demo — Off-screen nav with :focus-within [PURE CSS]
Realize the dynamic effect switch of digging gold login
Juejin. Im is a blog site I like very much. There is a little Easter egg in its login, and the panda on the top will have different status when you enter the account password, the effect is as follows:


     

With the focus-Within mentioned in this article, this dynamic effect can be achieved without any Javascript:


     

If you are interested, you can check out the full Demo code here:
CodePen Demo – Mining login effect pure CSS implementation
compatibility
Ok, the examples are almost enough, now comes the compatibility moment of killing the heart, according to the convention, this attribute is most likely a red, see CANIUSE, screenshot date (2018/08/02), actually is not particularly bleak.


     

The last
Thank you for your patience. This article is only a prelude to explore more meaningful uses of focus-within.
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
Well, the end of this article, I hope to help you 🙂
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.