CSS introduced the concept of pseudo-classes and pseudo-elements to format information beyond the document tree. That is, pseudo-classes and pseudo-elements are used to modify parts that are no longer in the document tree, such as the first letter in a sentence or the first element in a list

pseudo-classes

Pseudo-classes are used to style existing elements when they are in a state that changes dynamically based on user behavior. For example, when a user hovers over a specified element, we can use :hover to describe the state of the element. Although it is similar to a normal CSS class in that it can style existing elements, it can only style elements if the DOM tree is in an undescribable state, so it is called a pseudo-class

Stateful pseudo classes

Select based on the current state of the element. The state of an element changes dynamically during interaction with the user, so the element takes on different styles depending on its state. The style is rendered when the element is in one state and lost when it enters another state

  • :linkApply to links that have not been accessed
  • :hoverApply to the element over which the mouse is hovering
  • :activeApply to the active element
  • :visitedApply to links that have been visited, and:linkThe mutex
  • :focusApplies to elements that have keyboard input focus

Structural pseudoclass

CSS3 new selector, the use of DOM tree element transition, through the mutual relationship of the document structure to match elements, can reduce the class and ID attribute definition, make the document structure more concise

  • :first-childSelect the first child that belongs to its parent
  • :last-childSelects the last child element belonging to its parent element
  • nth-child(n)Select the NTH child of the parent element
  • :nth-last-child(n)Select the NTH to last child of its parent
  • nth-of-type(n)Selects the NTH element belonging to each group of sibling nodes of its parent element
  • :nth-last-of-type(n)Selects the NTH to last element of each set of sibling nodes belonging to its parent
  • :first-of-typeSelect the first element that belongs to its parent
  • :last-of-tyepSelect the next-to-last element that belongs to its parent
  • :only-childSelect an element that does not have any siblings
  • :only-of-typeAny sibling element that has no other sibling element of the same type was selected
  • :emptyThe selected element with no child elements
  • :checkedMatches the selectedinputElement, this oneinputElements includeradioandcheckbox
  • :defaultMatches a default form element in a set of related elements
  • :disabledMatches disabled form elements
  • :enabledMatch is not setdisableProperty of the form element
  • :validMatch the content to verify the correct form element

Pseudo elements

Use to create and style elements that are not in the document tree. In effect, a pseudo-element is something that a normal selector cannot do by selecting something before or after it. The content of the control is the same as the element, but it is an abstraction based on the element and does not exist in the document structure. For example, we can append some text to an element and style the text with ::before

The CSS3 specification requires the use of colons: for CSS3 pseudo-classes and double colons :: for CSS3 pseudo-elements in order to distinguish pseudo-classes from pseudo-elements

  • ::first-letterSelect the first word of the element text
  • ::first-lineSelect the first line of the element text
  • ::beforeAdd new content at the top of the element content
  • ::afterAdd new content at the end of the element content
  • ::selectionMatches portions that are selected or highlighted by the user
  • ::placeholderMatches the placeholder text, only the element is setplaceholderProperty, the pseudo-element takes effect