What is a pseudo class in html

In HTML, pseudo-class is a selector used to add corresponding styles to existing elements when they are in a certain state (sliding, clicking, etc.), and this state changes dynamically based on user behavior. of. Commonly used pseudo-classes include ":active", ":hover", ":link", ":root", ":valid", etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Pseudo class: Used to add corresponding styles to existing elements when they are in a certain state (sliding, clicking, etc.). This state changes dynamically based on user behavior.

My understanding is: it does not exist in itself. It is a state that will only be triggered under specific circumstances (sliding, clicking). You can use CSS to modify the object in this state.

For example: when the user hovers over a specified element, you can use :hover to describe the state of this element. Although it is similar to general CSS and can add styles to existing elements, it can only be in the DOM tree. Styles can be added to elements only in the described state, so they are called pseudo-classes.

Commonly used pseudo-classes are:

• :active selects the element that is being activated (matches the specified state)

• :hover selects the element that is hovered by the mouse (matches the specified state)

• :link selects the element that has not been visited (matches the specified state)

• :visited Selects the element that has been visited (matches the specified status)

• :first-child Selects the element that is the first child element of its parent element

• :lang(value) Selects the element with the specified lang attribute

• :focus Selects the element with keyboard input focus

• :enable Selects every enabled element

• :disable Selects every disabled element

• :checked Select each selected element

• :target Select the current anchor element

• :first-of-type Select if its parent The element that is the first child element of a certain type

• :last-of-type selects the element that is the last child element of a certain type of its parent element

• :only-of-type selects the element that is the only child element of a certain type of its parent element

• :nth-of-type(n) selects the element that satisfies The element that is the nth child element of a certain type of its parent element

• :nth-last-of-type(n) selects the element that satisfies the nth child element of a certain type that is the penultimate element of its parent element The element

• :only-child selects the element that is the only child element of its parent element

• :last-child selects the element that satisfies is The element that is the last element of its parent element

• :nth-child(n) selects the element that is the nth child element of its parent element

• :nth-last-child(n) Selects elements that are the n-th child element from the bottom of its parent element

• :empty Selects elements that have no child elements

• :in-range selects elements whose values ​​are within the specified range

• :out-of-range selects elements whose values ​​are not within the specified range

• :invalid Selects elements whose values ​​are invalid

• :valid Selects elements whose values ​​are valid

• :not(selector) Select elements that do not satisfy the selector

• :optional Select form elements that are optional, that is, there is no "required" attribute

• :read-only selects form elements with "readonly"

• :read-write selects form elements without "readonly"

• :root Select the root element

Related recommendations: "html video tutorial"

The above is the detailed content of What is a pseudo class in html. For more information, please follow other related articles on the PHP Chinese website!