Single and double colons in CSS, as well as pseudo-classes and pseudo-elements

A single colon (:) used for CSS3 pseudo-classes, double colons (::) for CSS3 pseudo-elements. A pseudo-element consists of a double colon and a pseudo-element name. Double colons are introduced in the CSS3 specification to differentiate between pseudo-classes and pseudo-elements. But pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as: First-line,: First-letter,: Before,: After

1. Pseudo-class and pseudo-elements

What do you mean pseudo-class?

Pseudo-classes are based on the characteristics of elements rather than their ID, class, attributes, or content. In general, the feature of an element is not inferred from the DOM tree, and it is dynamic, and when the user interacts with the DOM, the element can acquire or lose a pseudo-class. (There is an exception here, :first-child and :lang it can be inferred from the DOM tree.) ）

CSS pseudo-elements: used to add special effects to certain selectors. Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document tree.

　　Pseudo-elements are objects outside of the creation document tree. For example, a document cannot provide a mechanism to access the first word or the first line of element content. Pseudo-elements also provide a number of content assignment styles that do not exist in the source document, such as :before and the :after ability to access the resulting content. The content of a pseudo-element is actually the same as a normal DOM element, but it is simply an abstraction based on elements that does not exist in the document, so it is called a pseudo-element.

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.
CSS3 in order to distinguish between pseudo-classes and pseudo-elements, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons. But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.
A single colon (:) used for CSS3 pseudo-classes, double colons (::) for CSS3 pseudo-elements. A pseudo-element consists of a double colon and a pseudo-element name. However, the browser needs to support the old existing pseudo-elements, such as: First-line,: First-letter,: Before, after, and the new pseudo-element introduced in CSS3 does not allow the old single colon to be supported.

2, CSS3 new Pseudo-class

The difference between the two

Let's start with the similarities between pseudo-classes and pseudo-elements ,

Neither pseudo-class nor pseudo-elements are present in the source file and document tree. That is, the pseudo-class and pseudo-elements are not visible in the HTML source file.

The difference between them,

Pseudo-classes are actually different states based on common DOM elements, which are a feature of DOM elements. Pseudo-elements can create abstract objects that do not exist in the DOM tree, and these abstract objects can be accessed.

In a word, the difference is that a pseudo-element produces a new object that is not visible in the DOM tree, but can be manipulated; the pseudo-class does not produce new objects, only the different states of an element in the DOM;

Single and double colons in CSS, as well as pseudo-classes and pseudo-elements