What is the difference between pseudo-classes and pseudo-elements in css

1. Definition difference

(Recommended tutorial: css quick start)

Pseudo class

Pseudo-classes are used to select information outside the DOM tree, or information that cannot be represented by simple selectors. The former includes those elements that match the specified state, such as :visited, :active; the latter includes those elements in the DOM tree that meet certain logical conditions, such as :first-child, :first-of-type, :target.

Pseudo elements

Pseudo elements are virtual elements that are not defined in the DOM tree. Unlike other selectors, it does not take the element as the smallest selection unit, it selects the specified content of the element. For example::before means the previous content of the selected element, that is, ""; ::selection means the selected content of the selected element.                 

2. Syntax difference

In CSS3, pseudo-classes and pseudo-elements are also grammatically different, and pseudo-elements are modified to start with::. However, due to historical reasons, browsers continue to support pseudo-elements starting with:, but it is recommended to write them in a standard format starting with::.

The above is the detailed content of What is the difference between pseudo-classes and pseudo-elements in css. For more information, please follow other related articles on the PHP Chinese website!