The use of focus within selector in CSS3

Time:2021-5-4

Pseudo elements and pseudo classes

Speaking of which, let’s review first,Pseudo class selectorandPseudo element selectorThe old version of the browser did not strictly distinguish between the following two writing methods.


a:after{}
a::after{}

In the new standard, single colon (:) is used for CSS3 pseudo class and double colon (::) is used for CSS3 pseudo element. We can pay attention to it when we develop it. Of course, most browsers can recognize it in both ways.

Common pseudo elements and pseudo classes

Pseudo class

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

Pseudo class is generally used for a certain state of an element, such as mouse suspension, button click, link visited, input box focus, etc., and it is also used to select a special element, such as the first, last, even, odd, etc. 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 example above shows an exampleaDifferent styles of tags in different states, before clicking the link,aThe label appears in red font (link), then move the mouse toaThe label says,aThe label is underlined, and when the mouse is pressed,aThe label turns to blue (active), and after you click it,aThe label turns green. As you can see, the function of pseudo class is to add styles to tags in different states.

Pseudo element

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

It is mentioned in the content module that pseudo elements are useless if the “content” attribute is not set. The content inserted with pseudo elements is not visible in the source code of the page, but only visible in CSS. The inserted element is inline by default (or, in HTML5, in the category of text semantics). Therefore, in order to give the inserted element height, padding, margin, and so on, 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, if you have a font family, bold, Tahoma, sans serif fonts are applied to the body element, and then pseudo elements inherit these font families like other elements. Pseudo elements do not naturally inherit from the style of the parent element, such as padding margins. Your intuition is that: before and: after pseudo elements may be inserted content that will be injected before or after the target element. In fact, this is not the case. The injected content will be a child element of the associated target element, but it will be placed “before” or “after” any content of this 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, wehtmlOnly one element is written in the part, but we use pseudo elements to render three parts. First, middle and last, we can think that pseudo elements are generally used to assisthtmlThe elements of. However, we can’t see the source code of the content page. We can achieve many magical functions by using pseudo elements. We won’t explain them here, but we will give a specific tutorial later.

Magic pseudo class: focus within

Let’s get back to our main characterfocus-withinWe know, pseudo classfocusWhen an element gets the focus, it adds a style to it.focus-withinIt means that an element gets the focus, or that its descendants get the focus. Focus, it or its offspring get the focus. This means that it, or its offspring, gets the focus and can trigger it:focus-within

This property is a bit similarJavascriptThe event bubbling starts from the available coke element and continues to the root elementhtml, can receive trigger:focus-withinEvent, 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>

Results of operation:

As you can see, in thebuttonWhen you get the focus, all its parent elements are applied because of the bubble:focus-withinIt’s a new style. It’s worth noting here that it’s normaldivYou can’t get the focus. Set the tabIndex property to get the focus. At the same time, press the tab key on the keyboard to get the focus. The smaller the tabIndex value is, the better the focus will be when the tab key is switched. according to:focus-withinWe can achieve many practical functions without using JS.

Sensing user focus area

utilizefocus-withinIt can increase the user’s perception area and make the user get 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 there’s nojavascriptIn the case of logic control, usefocus-withinThe above effect is achieved.

Realize off screen navigation

Let’s look at the effect first

As you can see, it’s a great navigation effect, and the real implementation is not usedjavascriptControl, which undoubtedly has a lot of improvement in performance and experience. Specific source code can see the following address: address

Realize B station, nuggets and other websites login dynamic switching

We may have noticed that the picture above covers our eyes when users enter passwords in station B and nuggets. We can also use it herefocus-withinTo achieve.

<html>
 <div class="g-wrap"></div>
        <div class="g-container">
            <h2>Login</h2>
            <div class="g-username">
                < input MaxLength = "64" placeholder = "please input mobile phone number or email" 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 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>

As you can see, when not applicablejsHowever, there are still some limitations,domPermutation can only be parent up, and elements cannot be placed infocusIn the child element of the element. So nojsFlexible, but less code.

Focus within compatibility

Because the new features of CSS3 always have compatibility problems, here we check the compatibility of CSS3, and we can see that the red area is not too bleak. Other browsers basically support it.

All the source code can be found in my warehouse address:address

This article about the use of CSS3 focus within selector is introduced here. For more about CSS3 focus within selector content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]