Pseudo elements and pseudo classes

Speaking of which, let’s recall that older browsers didn’t make a strict distinction between pseudo-class and pseudo-element selectors.

a:after{}
a::after{}
Copy the code

In the new standard, the single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements.

Common pseudo-elements and pseudo-classes

pseudo-classes

:link.:visited.:hover.:active.:focus.:first-child.:last-child.:nth-child.:nth-last-child.:not()
Copy the code

Pseudo-classes are generally used for a certain state of an element, such as mouse hover, button click, link has been visited, input box focus, etc., and also used to select a special element, such as the first, last, even, odd, etc. The effect is to add styles to an element that meets the above criteria.

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

The example above shows the different styles of a tag in different states. Before the link is clicked, a tag shows a red font, and when the mouse moves over it, a tag appears an underscore (hover). When the mouse is pressed, a tag turns blue (active). A The label turned green (visited). As you can see, pseudo classes are used to style tags in different states.

Pseudo elements

::first-letter.::first-line.::before.::after
Copy the code

As mentioned in the content module, pseudo-elements are useless if the “content” attribute is not set. Content inserted with pseudo-elements is not visible in the source code of the page, only in CSS. Inserted elements are inline by default (or, in HTML5, in the category of text semantics). Therefore, in order to give the inserted element height, padding, margins, 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 of bold, 宋体, sans serif fonts applied to the body element, then the pseudo-element inherits the font family just like any other element. Pseudo-elements do not naturally inherit the styles of their parent elements, such as the padding margins. Your intuition is :before and :after pseudo-elements may be inserted before or after the content is injected into 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 the 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>
Copy the code

Operation effect:As you can see, wehtmlThe section only writes one element, but we render three sections with pseudo-elements, front, middle and back. Here we can think of pseudo-elements as auxiliaryhtmlThe element. But in the source code of the content page and can not see, the use of pseudo elements can achieve a lot of magical functions, here do not do specific explanation, and then out of a specific tutorial.

Magic pseudo-class: focus-within

Back to our main character focus-within, we know that the pseudo-class focus refers to adding style to an element when it gets focus. Focus-within is broader and indicates that an element gets focus or a descendant of that element gets focus. Focus, and it or its descendants gain focus. This means that either it or its descendants can get focus :focus-within.

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:

<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>
Copy the code

Running results:As you can see, inbuttonWhen it gets focus, all its parent elements are applied because of bubbles:focus-withinStyle. It’s worth noting here that normaldivIs not able to obtain the focus, set the tabIndex property to obtain the focus, and press the Tab key to obtain the focus, where the smaller tabIndex value will be the first focus when the Tab key is switched. According to the:focus-withinWe do not use JS to achieve a lot of practical functions.

Sensing user focus area

Using focus-within can increase the user’s perception area, so that users can 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; The transition: 0.3 s; box-shadow: 0 0 0px #ddd; &:focus { box-shadow: 0 0 10px #ddd; border-color: hsl(199, 98%, 48%); }}</style>
</html>
Copy the code

You can see in the absence of anyjavascriptLogic control case, usefocus-withinThe above effect is achieved.

Realize off-screen navigation

Let’s take a look at the effect:

As you can see, this is a great navigation effect, and the implementation does not use javascript controls, which is undoubtedly a performance and experience improvement. Specific source code can see the following address: address

B station, nuggets and other websites login dynamic switching

We usually may notice, B station and nuggets in the user input password, the above picture is to cover the eyes, we can also use herefocus-withinTo implement.

<html>
 <div class="g-wrap"></div>
        <div class="g-container">
            <h2>The login</h2>
            <div class="g-username">
                <input maxlength="64" placeholder="Please enter your phone number or email address." class="input">
                <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.imag e" class="g-username">
            </div>
            <div class="g-password">
                <input type="password" maxlength="64" placeholder="Please enter your password" class="input">
                <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/blindfold.58ce423.png~tplv-t2oaga2asx-image.ima ge" class="g-password">
            </div>
            <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/normal.0447fe9.png~tplv-t2oaga2asx-image.image" 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> Copy the code

As you can see, it is possible to dynamically switch images without using JS, but there are some limitations. Dom can only be arranged in the parent direction, and elements cannot be placed inside the child element of the focus element. So not as flexible as JS, but less code.

Focus – the within compatibility

Because cSS3 new features have been compatible problems, here query its compatibility, see the red area is not too bleak, out of IE, other browsers are basically supported.

All source code is available at my warehouse address: address

Personal blog: Address

Article reference link: address

Learning is like rowing upstream, not to advance is to fall back, the rapid development of front-end technology, if you don’t keep learning every day, you will not keep up, I will accompany you, every day to push blog, progress with you, I hope you can pay attention to me, the first time to receive the latest article.

The public no. :