On CSS pseudo element & the magical use of pseudo class

Time:2020-11-22

CSS plays a very important role in a web page. In recent years, with the development of CSS, pseudo elements / pseudo classes have also been widely used: in the current performance is more and more valued, CSS pseudo elements / pseudo classes outside the document stream are worthy of the “king without crown”!

The following summary of some CSS “Sao operation”, I hope to help you:

: hover and: focus show floating layers

We can use CSS’s parent-child selector (for parent-child nesting) / sibling selector (for sibling arrangement) + pseudo class:hoverThe implementation of “when the mouse slides into the display XXX”, even without JS! For example, when the mouse slides into a link, the image is displayed

< a http: // javascript:; "> image link</a>
<img src="xxx" alt="" />
img{
      visibility: hidden;
      position: absolute;
      * * /. 2iblity setting**/
}
a:hover + img,
img:hover{
  visibility: visible;
}

Finally, I addedimg:hoverIt’s to keep the picture as it’s moving over the image – to prevent the picture from covering the link.

But this will “fail” in one case: no mouse environment. For example: mobile terminal, intelligent device. We can add pseudo classes to img:focusTo optimize the experience – focused state:


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

:focus:hover

In fact, in the drop-down list. I don’t recommend using “non parent child juxtaposition elements” – if you’re just using CSS. The problem lies in focus:focusMatches only when the current element is in focus. Then, this requires a series of solutions to solve this problem simply. For example, the above setting of the transition delay is for this effect. But in fact, it’s a “not a problem”: because browsers support the new specification::focus-within, which states that “match when the current element or any child element of the current element is in focus”! It is essentially a “parent selector behavior”:

<div class="y-table">
     < a http: // javascript:; "class =" y-msg "> my message</a>
     <div class="cs-list">
          < a http: // javascript:; "> my answer</a>
          < a http: // javascript:; "> my private message</a>
          < a http: // javascript:; "> my order</a>
          < a http: // javascript:; "> my concerns</a>
          < a http: // javascript:; "> my collection</a>
      </div>
</div>

:focus-within

: not() judge display elements

In the [search] button of the web page, there is such a scene: the list is displayed according to the entered keywords. The author once wrote an article to illustrate the scene with javascript: (JavaScript) how does the real-time automatic completion function of Baidu / Google search work?

In fact, we can also use CSS:not()To optimize the display — judge whether the information that is not XXX meets the conditions:


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

Among CSS3 selectors, there is a thing called property selector, including:[attr] (with this attribute), [attr = XXX] (attribute value is XXX), [attr ^ = XXX] (attribute value starts with XXX), [attr $= XXX] (attribute value ends with XXX), [attr * = XXX] (attribute value contains XXX)These usages.

Then, the show class name is added dynamically to some items of the returned list according to “whether they meet the criteria” during filtering. We can even cooperate with “custom data properties”:

:not

Click the button to display the chrysanthemum diagram

Let’s talk about a very common usage scenario: in the form, when you click the submit button, if you can let users see “more feedback effect”, it seems that this page will be more popular. So, when you “submit a form,” it seems like a good choice to let users know they’re waiting

Control the class name through JavaScript, apply loading name to button when clicking, make its text transparent, and set the background as a loading graph!

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 implementation of “data reporting”

In fact, there is a small problem in web pages: what if users disable JavaScript / browsers do not support JavaScript? Of course, the latter situation will not happen now, but it is really a thorny problem and has attracted a lot of front-end developers to work hard for it!

This issue has also been mentioned in other articles of the author. Here we only talk about “data reporting”: if there is no form and JavaScript is not supported (there is no way to use ajax), how can the data be transmitted to the back end? Fortunately, there are pseudo classes:active——Click state! It used to be only for a, but now it also supports all HTML tags. But you may ask: this pseudo class is not used to change the color of links? Of course, this element alone can’t work, but I don’t know if you have thought of the classic demo of “judge the number of hits”!

We usually combine active with after:

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

Why use URL here? If the image format is not used, only fixed values can be written in the string format of after content.

:: after and:: before scenarios

As the “shoulderers” in pseudo elements / pseudo classes, how can after and before not say? They use too many scenes: they can be seen in the common “symbols between the characters”, “the horizontal lines before and after the words”, “some special patterns and even combination patterns”:

:after

Implementation of a search icon style

A cool “loading” implemented by pure CSS

This article about CSS pseudo elements & amp; pseudo class magic article introduced here, more related CSS pseudo elements & amp; pseudo class content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!