In this article we introduce a slightly special class of two selectors – pseudo-class selectors and pseudo-element selectors. In pages, these two types of selectors are often used to mark up special styles that basic and composite selectors cannot solve, and some of which even JS cannot. Let’s take a look at each of these special selectors.

Pseudo class selector

On a page, sometimes the same element has different styles for different actions. Links have one style when they are not clicked, another style when they are placed over them, and another style when they are finished. In these cases, the tag of the link does not change, but only its state. At this time, pseudo-classes can be used to achieve this requirement. In browsers, pseudo-classes appear to add special effects or restrictions to certain selectors. A pseudo-class is a normal selector followed by the pseudo-class name separated by a colon (:). For example, we want a hyperlink to have an underscore when the mouse is placed over it: 

a:{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}Copy the code
When you set an “A” label style, the underscore will appear when you place the cursor over it and disappear when you remove it.

Pseudo classes are useful in two main ways. One is to flag special states, like the one in the original example. There is also a class of pseudo-classes that have filtering capabilities. The following lists the functions of the common selectors in these two pseudo-classes.

1, mark the status of the pseudo class:

There are several pseudo-classes that can mark element state:

  • :link, selects the hyperlink element that has not been accessed. If we pay attention to search engine results, links in the search engine will change color whenever they are clicked, marking which links have been visited. The :link attribute is used to identify links that have not been visited.
  • :visited selects hyperlink elements that have been visited. Contrary to the first rule, :visited is used to mark which links have already been visited, preventing repeated clicks.
  • :hover, select the element to hover over. Hover: this pseudo-class is often used on PCS to control the hover style when the mouse is placed over an element. Since there is no concept of a mouse in mobile, this pseudo-class is rarely used in mobile.
  • :active, selects the element in the point. The purpose of this pseudo-class was mentioned earlier, when we want the button to have action feedback, it can be used to mark the style of action feedback. Of course, this pseudo-class is also generic, not just for buttons.
  • :focus, selects the element that gets the focus. This pseudo-class is used to identify the element that gets the focus. For example, the search box has an obvious border when it is focused, so that the user can know the current inputable state.

Ii. Pseudo-classes of screening functions:

Some pseudo-classes can also have filtering capabilities, which can style specific elements based on their characteristics or index. Commonly used pseudo-classes with filtering functions are as follows:

  • :empty selects elements that have no children. For example, if you select an empty span, you can use the SPAN :empty selector. Notice that elements that have Spaces in them are not empty, they are not selected by this pseudo-class.
  • :checked: selects checked input elements. This applies only to radio and checkbox.
  • :disabled, select the form elements to disable.
  • :first-child selects the first element of the current selector.
  • :last-child, as opposed to first-child, selects the last element under the current selector.
  • :nth-child(an+b), selects the element at the specified position. This pseudo-class takes arguments, and arguments can be of the form an+b, where a and b are both variable, and n starts at zero. You can use this pseudo-class to select the number of elements, or to select all elements whose numbers match an+b. For example, if we use li:nth-child(2n+1), we can select all elements of the li element whose number is 2 plus 1, i.e. the first, third, fifth, seventh, ninth, and 2n+1 li element.
  • :nth-last-child(an+b) : nth-last-Child (an+b) : nth-last-Child (an+b) : nth-last-Child (an+b)
  • :only-child: selects a unique child element. This pseudo-class works if an element’s parent has only one child. If an element has sibling elements, the pseudo-class does not apply to it.
  • :only of type: selects a unique element of a certain type. This pseudo-class works if an element has only one element of the current type in its parent. This pseudo-class allows the parent element to have other elements, as long as they are different from itself.

Pseudo element selector

Pseudo-element selectors are used to set special effects on certain elements. Pseudo-element selectors are called pseudo-element selectors because they do not select real DOM elements. There are five commonly used pseudo-element selectors:

  • ::first-line, which uses a style for the first line of an element.
  • ::first-letter, a style for the first letter or word of the text in an element.
  • ::before, insert something before an element.
  • ::after, insert something after an element.
  • :: Selection: styles the element selected by the cursor.
1. The element constructed by the pseudo-element selector is virtual, so you cannot manipulate it with JS. 2. If both before and first-letter pseudo-classes are used, the first word will be calculated from the content in before. If the content in before is a non-text element, then first-letter will also apply to the non-text element. But it may not work. 3. First-line and first-letter do not apply to inline elements, where both selectors are invalidated. 4. In CSS3, it is specified that pseudo-classes are represented by a colon (:) and pseudo-elements by two colons (::). But with the exception of Selection, the other four pseudo-element selectors already exist in CSS2 and are represented by the same single colon as the pseudo-classes. For backward compatibility, pseudo-element selectors in modern browsers use both single and double colons. In the case of no compatibility problems, we still recommend that you follow the new CSS3 standard to develop.

conclusion

This article covers pseudo-class selectors and pseudo-element selectors, both of which are used to add special effects to elements, but these effects are only used for display and cannot be manipulated by JS. The selectors section lists the common selectors defined before CSS3.