Use of CSS3's focus-within selector

Use of CSS3's focus-within selector

Pseudo-elements and pseudo-classes

Speaking of this, let's review first, pseudo-class selectors and pseudo-element selectors . Older browsers did not strictly distinguish between the following two writing methods.

a:after{}
a::after{}

In the new standard, the single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements. We can pay attention to this during development. Of course, most browsers can recognize both writing methods.

Common pseudo-elements and pseudo-classes

Pseudo-classes

:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

Pseudo-classes are generally used for a certain state of an element, such as mouse hover, button click, link visited, input box focus, etc. They are also used to select a special element, such as the first, last, even, odd, etc. of multiple elements. Its function is to add some styles to an element that meets the above conditions.

a:hover{
        text-decoration: underline;
    }
a:active {
    color: blue;
}
a:link {
    color: red;
}
a:visited {
    color: green;
}

The above example shows the different styles of an a tag in different states. Before clicking the link, the a tag is in red font (link). When the mouse moves over the a tag, a tag is underlined (hover). When the mouse is pressed, the a tag turns blue (active). After clicking, the a tag turns green (visited). As you can see, the purpose of pseudo-classes is to add styles to tags in different states.

Pseudo-elements

::first-letter, ::first-line, ::before, ::after

As mentioned in the content module, pseudo-elements are useless if the "content" attribute is not set. Content inserted using pseudo-elements is not visible in the source code of the page, but only in the CSS. Inserted elements are by default inline elements (or, in HTML5, in the text semantic class). Therefore, in order to give an inserted element height, padding, margins, etc., you usually have to explicitly define it as a block-level element. Also note that typical CSS inheritance rules apply to inserted elements. For example, you have the font family Helvetica, Arial, Sans Serif applied to the body element, then the pseudo-element will inherit that font family just like any other element. Pseudo-elements do not naturally inherit styles from their parent element (such as padding margins). Your intuition is that the :before and :after pseudo-elements might mean that the inserted content will be injected before or after the target element. This is not the case, the injected content will be a child of the associated target element, but it will be placed "before" or "after" any content of that element.

<head>
    <style type="text/css">
        p.box::before {
          content: "#";
          border: solid 1px black;
          padding: 2px;
          margin: 0 10px 0 0;
        }
        p.box::after {
          content: "#";
          border: solid 1px black;
          padding: 2px;
          margin: 0 10px 0 0;
        }
    </style>
</head>
<body>
<p class="box">Other content.</p>
</body>

Operation effect:

As you can see, we only wrote one element in html part, but we used pseudo-elements to render three parts, front, middle, and back. Here we can think that pseudo-elements are generally used to assist html elements. However, the source code of the content page cannot be seen. Many magical functions can be achieved by using pseudo-elements. I will not explain them in detail here and will release a specific tutorial later.

Magic pseudo-class: focus-within

Let's get back to the topic and return to our protagonist focus-within . We know that the pseudo-class focus refers to adding styles to an element when it gets the focus. focus-within has a wider scope, it means that an element has focus, or a descendant element of that element has focus. Highlight the point and it or its descendants will gain focus. This means that when it or its descendants gain focus, :focus-within can be triggered.

This property is a bit like the event bubbling of Javascript , starting from the focusable element and bubbling to the root element html , which can receive the trigger :focus-within event, similar to the following simple example:

<html>
 <div class="box g-father">
        <div class="box g-children">
            <div class="box button" tabindex="1">button</div>
        </div>
  </div>
  <div class="g-body">HTML</div>
  <style>
    div {
      box-sizing: border-box;
    }
    .button,.g-children {
        width: 100%;
        height: 100%;
        padding: 20px;
        border: 1px solid;
    }
    .g-father {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 1px solid;
    }
    .g-body {
        margin-top: 20px;
        width: 200px;
        border: 1px solid;
    }
    .g-body:focus-within {
        background-color: #5daf34;
    }
    .g-father:focus-within {
        background-color: #3a8ee6;
    }
    .g-children:focus-within{
        background-color: #2c3e50;
    }
    .button:focus-within {
        background-color: #606266;
        color: red;
    }
        </style>
</html>

Running results:

You can see that when button gets the focus, due to bubbling, all its parent elements apply the :focus-within style. It is worth noting here that a normal div cannot get the focus. It can only get the focus by setting the tabindex attribute. At the same time, pressing the Tab key on the keyboard can also make it get the focus. The smaller the tabindex value, the more it will be focused first when the tab key is switched. According to the characteristics of :focus-within , we can implement many practical functions without using js.

Sensing user focus area

Using focus-within can increase the user's perception area and give users better visual feedback.

<html>
 <div class="g-container">
      <input type="text" placeholder="user name" class="g_input" >
      <input type="text" placeholder="code" class="g_input" >
  </div>
  <style>
    .g-container {
        margin-top: 10vh;
    }
    .g-container {
        padding: 10px;
        width: 30vw;
        border: 1px solid #eee;
        transition: all .3s;
        text-align: center;
    }
    .g-container:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 0 10px #ddd;
        border-color: hsl(199, 98%, 48%);
    }
    .g_input {
        border: none;
        width: 20vw;
        padding: 15px;
        font-size: 18px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 0 0px #ddd;
        &:focus {
            box-shadow: 0 0 10px #ddd;
            border-color: hsl(199, 98%, 48%);
        }
    }
    </style>
</html>

You can see that without any javascript logic control, the above effect can be achieved using focus-within .

Implement off-screen navigation

Let's take a look at the effect first:

It can be seen that this is a great navigation effect, and the entire implementation does not use javascript control, which undoubtedly improves performance and experience a lot. The specific source code can be found at the following address: Address

Implement login animation switching for websites such as B Station and Nuggets

We may have noticed that when users enter their passwords on Bilibili and Nuggets, the pictures above show them covering their eyes. We can also use focus-within to achieve this here. 

<html>
 <div class="g-wrap"></div>
        <div class="g-container">
            <h2>Login</h2>
            <div class="g-username">
                <input maxlength="64" placeholder="Please enter your phone number or email address" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
            </div>
            <div class="g-password">
                <input type="password" maxlength="64" placeholder="Please enter your password" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
    </div>
<style>
.g-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}

.g-container {
  position: relative;
  width: 318px;
  margin: 100px auto;
  height: 370px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;
}
.g-container h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
.g-container input {
  outline: none;
  padding: 10px;
  width: 100%;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  font-size: 16px;
}

img {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 120px;
  height: 95px;
  transform: translate(-50%, 0);
}

.g-username {
  margin-bottom: 10px;
}
.g-username img {
  display: none;
  width: 120px;
  height: 113px;
}

.g-username:focus-within ~ img {
  display: none;
}

.g-username:focus-within input {
  border-color: #007fff;
}
.g-username:focus-within img {
  display: block;
}

.g-password {
  margin-bottom: 10px;
}
.g-password img {
  display: none;
  width: 103px;
  height: 84px;
  top: -15%;
}

.g-password:focus-within ~ img {
  display: none;
}

.g-password:focus-within input {
  border-color: #007fff;
}
.g-password:focus-within img {
  display: block;
}
</style>
</html>

It can be seen that the effect of dynamic switching of images can be achieved without using js , but there are still some limitations. The dom arrangement can only be parent-up, and the element cannot be placed in the child element of focus element. So it is not as flexible as js , but the amount of code is less.

focus-within compatibility

Because there have always been compatibility issues with the new features of CSS3, I checked its compatibility here and saw that the red area is not too bleak. Except for IE, other browsers basically support it.

All source codes can be found in my repository:

This is the end of this article about the use of CSS3's focus-within selector. For more information about CSS3's focus-within selector, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Example implementation of checking whether an object is empty in native javascript

>>:  A brief analysis of the principles of NFS servers and the steps for building, configuring and deploying them

Recommend

Vue uses dynamic components to achieve TAB switching effect

Table of contents Problem Description What is Vue...

How to enable Flash in Windows Server 2016

I recently deployed and tested VMware Horizon, an...

Detailed explanation of Vue's self-implementation of dispatch and broadcast (dispatch and broadcast)

Problem to be solved Mainly for cross-level commu...

Mysql WorkBench installation and configuration graphic tutorial

This article shares with you the installation and...

CSS position fixed left and right double positioning implementation code

CSS Position The position attribute specifies the...

Best Practices for Sharing React Code

When any project develops to a certain complexity...

Detailed explanation of redis5 cluster construction and usage under Linux (Centos7)

Table of contents 1. Brief description 2. Steps t...

Basic usage of find_in_set function in mysql

Preface This is a new function I came across rece...

Tutorial on customizing rpm packages and building yum repositories for Centos

1 Keep the rpm package downloaded when yum instal...

Detailed explanation of Docker Volume permission management

Volume data volume is an important concept of Doc...

mysql 5.7.20 win64 installation and configuration method

mysql-5.7.20-winx64.zipInstallation package witho...

mysql-8.0.17-winx64 deployment method

1. Download mysql-8.0.17-winx64 from the official...

Vue implements file upload and download functions

This article example shares the specific code of ...

Notes on configuring multiple proxies using vue projects

In the development process of Vue project, for th...

A Deep Dive into JavaScript Promises

Table of contents 1. What is Promise? 2. Why is t...