A brief discussion on the magical uses of CSS pseudo-elements and pseudo-classes

CSS plays a very important role in a web page. With the development of CSS in recent years, pseudo-elements/pseudo-classes have also begun to be widely used: at a time when performance is becoming more and more important, CSS pseudo-elements/pseudo-classes outside the document flow are the well-deserved "uncrowned kings"!

Here are some of the "sexy operations" about CSS summarized by the author, I hope it can be helpful to you:

:hover and :focus display floating layer

We can completely use only CSS parent-child selector (for "parent-child nesting")/sibling selector (for "parallel arrangement of the same level") + pseudo-class :hover to achieve [display xxx when the mouse slides in], without even using JS! For example: when the mouse hovers over the link, the image is displayed

<a href="javascript:;">Image link</a>
<img src="xxx" alt="" />

img{
      visibility: hidden;
      position: absolute;
      transition: visibility .2s; /** Set delay **/
}
a:hover + img,
img:hover{
  visibility: visible;
}

Finally, img:hover is added to keep the image displayed when the mouse moves over the image - to prevent the image from covering the link display.

But this will "fail" in one situation: no mouse environment. For example: mobile terminals and smart devices. We can add the pseudo class :focus to img to optimize the experience - Focus state:

a:focus + img,
img:focus{
	visibility: visible;
	transition: none;
}

:focus:hover

In fact, in the drop-down list. I don’t recommend using “parallel elements without parent-child relationships” — if you’re just using CSS. The problem lies in focus: :focus only matches when the current element is in the focused state. Well, this requires a series of solutions to simply solve this problem, such as setting the transition delay above for this effect. But in fact, this is still a "not a problem": because the browser supports the new specification: :focus-within , which stipulates that "it will match when the current element or any child element of the current element is in focus"! It's essentially a "parent selector behavior":

<div class="y-table">
     <a href="javascript:;" class="y-msg">My Message</a>
     <div class="cs-list">
          <a href="javascript:;">My Answer</a>
          <a href="javascript:;">My private message</a>
          <a href="javascript:;">My Orders</a>
          <a href="javascript:;">My Follow</a>
          <a href="javascript:;">My Favorites</a>
      </div>
</div>

:focus-within

:not() determines the display element

In the [Search] button on a web page, there is a scenario where a list is displayed based on the entered keywords. The author once wrote an article using JavaScript to illustrate the scenario: (JavaScript) How does the instant auto-completion function of Baidu/Google search "work"?

In fact, we can also use CSS :not() to optimize the display - to determine if the information that meets the conditions is not xxx:

.list:not([class="show"]) { display: none; }

In CSS3 selectors, there is something called attribute selector, which has the following usages: [attr](有該屬性) , [attr=xxx](屬性值是xxx) , [attr^=xxx](屬性值是xxx開頭) , [attr$=xxx](屬性值以xxx結尾) , [attr*=xxx](屬性值包含xxx) .

Then, when filtering, dynamically add the show class name to some items in the returned list based on whether they meet the conditions. We can even use "custom data attributes":

:not

Click the button to display the chrysanthemum picture

Let’s talk about a common usage scenario: in a form, when you click the submit button, if users can see “more feedback effects”, it seems that the web page will be more popular. So, it seems like a good idea to let the user know that they are waiting when you "submit the form":

Control the class name through JavaScript, add loading-name to the button when clicked, make its text transparent, and set the background to a loading image!

When you see "click", I think you should think of "pseudo-class: focus" or "pseudo-class: active" for a moment, try to rewrite it!

:active implements "data reporting"

In fact, there is a small problem in the web page: what if the user disables JavaScript/the browser does not support JavaScript? Of course, the latter situation basically does not occur now, but it is indeed a thorny problem and has attracted a large number of front-end developers to devote their efforts to it!

This issue has been mentioned in other articles of the author. Here we will only talk about "data reporting": If there is no form and JavaScript is not supported (ajax cannot be used), how to pass data to the backend? Fortunately, there is the pseudo-class :active - the click state! It originally only supported a, but now it supports all HTML tags. But you might ask: Isn’t this pseudo-class generally used only to change the color of links or something? Of course, this element alone is not enough, but I wonder if you have thought of the classic demo [Judging the number of clicks]!

We usually use active and after together:

Even if you don’t believe it, it does send a request to the server and upload the data!

Why use url here? If you do not use the image format, you can only write fixed values ​​in the string format of after-content.

::after and ::before scenarios

As the "leaders" among pseudo-elements/pseudo-classes, how can we not talk about after and before? They are used in so many scenarios: they can be seen in the common "'|' symbol between words", "horizontal lines before and after words", "some special patterns and even combined patterns":

A "search icon" style implementation

A cool "loading" implemented in pure CSS

This is the end of this article about the wonderful uses of CSS pseudo-elements and pseudo-classes. For more relevant CSS pseudo-elements and pseudo-classes, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!