This article is not the original article, the content of the reference from the summary of pseudo-classes and pseudo-elements, only for learning reference use, if you have any questions, please feel free to contact me to delete

Pseudo classes and pseudo elements

Why are pseudo-class sums introduced as elements

CSS introduced the concept of pseudo-classes and pseudo-elements to format information outside of the document tree, that is, parts of a DOM document. The difference is that pseudo-elements create new elements, whereas pseudo-classes do not

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 element’s state and add a style to it.

Pseudo class – structure

  1. :link Selects an unaccessed link
  2. :visited Selects links that have been visited
  3. :hover Selects the element to hover over
  4. :active Selects the active link
  5. :focus Selects the field to obtain the focus

Pseudo class – structuring

  1. :not A negative pseudo-class that matches elements that do not match the argument selector
  2. :first-child Matches the first child of the element
  3. :last-child Specifies the last child of the matched element
  4. :first-of-type represents the first element of its type in a set of sibling elements
  5. :last-of-type indicates the last element of its type in a set of sibling elements
  6. :nth-child matches one or more elements based on their position. It takes an argument of the form an+b
2n+1 matches positions 1,3,5,7... You can replace odd rows with odd, even rows with evenCopy the code
  1. : nth-last-Child is similar to :nth-child except that it starts counting from the last child
  2. :nth-of-type is similar to nth-child except that it matches only elements of a specific type
  3. :nth-last-type is similar to nth-of-type except that it starts counting from the last child element.
  4. :only-child :only-child matches an element if it is the only child of its parent
  5. : only-type :only-child matches an element if it is the only child of a specific type within its parent
  6. :target When a URL with a target name refers to a specific element in the document :target matches that element

Pseudo classes – form elements

  1. : Checked matches the checked input element that wraps the radio and checkbox.
  2. :default Matches the elements selected by default
  3. :disabled Matches the disabled form elements
  4. :empty matches elements that have no child elements. If the element contains text nodes, HTML elements, or a space, :empty will not match this element
  5. :enabled Matches form elements that do not have the disabled attribute set
  6. :in-range matches elements within the specified range,
  7. :out-of-range Matches elements that are not in the specified range
  8. : IndeTERMIMate When checkboxes or checkboxes ina group are not selected, : IndeTerminate matches all checkboxes or checkboxes in the group
  9. :valid Match condition verifies the correct form element
  10. :invalid Matches form elements that submitted validation errors
  11. :optional: Required Matches the form element with or without the Required attribute
  12. :read-only Matches the elements with the read-only attribute set
  13. : read-write Matches the elements in the edit state

Pseudo class – other related

  1. :root matches the heel element of the document
  2. :fullscreen Matches elements in full-screen mode

Pseudo elements

Pseudo-elements can create and style elements for the user that are not in the DOM document. For example, we can use before to add some text before an element.

Pseudo-elements sometimes use double colons instead of a colon. Css3 requires double colons to indicate pseudo-elements in order to distinguish pseudo-classes from pseudo-elements, and most browsers support both values.

  1. :before Inserts content before the selected element, requiring the content attribute to specify what content to insert. The inserted content does not actually exist in the document tree.
  2. :after and before, insert content after the selected element
  3. :first-letter Matches the first letter of the Chinese text element
  4. :first-line Matches the first line of text in an element. This can only be used in block elements, not inline elements
  5. :: Selection Matches the part selected by the user or highlighted. This element supports the double colon
  6. ::placeholder matches the text of the placeholder. Changing to an element will only take effect if the element sets the placeholder property.