Post: the difference and origin of CSS pseudo elements and CSS pseudo elements are described in detail.

Post: the difference and origin of CSS pseudo elements and CSS pseudo elements are described in detail.

The difference between the two is actually a very old problem. However, many people confuse the pseudo-classes with the pseudo elements due to mistransmission of various types of networks and irresponsible books, and even many CSS veterans. I was deeply misled when I first entered the Forum, because most posts in the Forum do not care about the nuances of this concept, even if someone says: "These two are different." They are just drowned by more posts. So I think it is necessary to write down what I know. Here we rewrite the difference between the two and some details that are easy to miss.

Both pseudo classes and pseudo elements belong to the CSS selector category. Therefore, their definitions can be found in the CSS standard selector chapter. CSS2.1 Selectors and CSS Selector Level 3 are the recommended standards.
Standard Definition

In CSS2.1, 5.10 Pseudo-elements and pseudo-classes describe the origins of these two concepts, which are mentioned together. But in Selector Level 3, they are separated into two sections for differentiation. However, in any case, the introduction of pseudo classes and pseudo elements is because some information in the document tree cannot be fully described. For example, CSS does not have a selector such as the first line of a paragraph, this is necessary in some publishing scenarios. In the standard:
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
Simple translation:
CSS introduces the concepts of pseudo classes and pseudo elements to format information beyond the document tree.
This is abstract to describe something that can't be described by the existing CSS. What is missing, then what is introduced, whether it is standards or people, is growing like this.

Differences between pseudo classes and pseudo elements 
Here, I can list a large table and separate all the pseudo classes and pseudo elements. However, this is not too formal. Instead of remembering "what is and what is not", it is better to really differentiate it. There is a fundamental difference between a pseudo-class and a pseudo-element, which is directly reflected in the standard description statement.
First, let's look at a pseudo-element first-line example. Now there is an HTML section with the content as a paragraph:

Copy the Code as follows:
<P> I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death. Nor known to Life. Have withstood pain to create custom weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>

What can I do if I want to describe the first line of this paragraph without pseudo elements? To do this, you must embed a layer of span and add the Class Name:

Copy the Code as follows:
<P> <span class = "first-line"> I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death. Nor known to Life. Have withstood pain to create custom weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>

Another example of a pseudo class first-child has a simple list:

Copy the Code as follows:
<Ul>
<Li> </li>
<Li> </li>
</Ul>

If I want to describe the first element of ul, I don't need to nest new elements. I just need to add a class name to the first existing li:

Copy the Code as follows:
<Ul>
<Li class = "first-child"> </li>
<Li> </li>
</Ul>

Although the first line and the first element have similar semantics, the final effect is completely different. Therefore, the fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements (abstraction ). From the perspective of imitating its meaning, if a new element needs to be added for identification, it is a pseudo element. Otherwise, if you only need to add a category to an existing element, it is a pseudo class. This is why the standard uses the word "create" accurately to explain pseudo elements, and the word "classify" to explain the reasons for pseudo classes. One describes the newly created "ghost" element, and the other describes the existing elements that conform to the "ghost" category.

At the beginning, a pseudo-class is used to represent the dynamic state of some elements. A typical concept is the state of each link (LVHA ). Subsequently, the CSS2 standard extended its conceptual scope to make it a "ghost" category that is logically present but does not need to be identified in the document tree.
A pseudo element represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.

Obfuscation between pseudo classes and pseudo elements 
Most obfuscation is probably because most people refer to the following pseudo elements: before AND: after as pseudo classes, and even in case of conceptual confusion, there is no problem in actual use-because even if the concept is confused, it will not cause much trouble for real use :)
CSS Selector Level 3 specifically uses colons to differentiate the confusion between the two:
The pseudo class is represented by a colon: first-child
The pseudo element is represented by two colons: first-line.

It is also stipulated that the browser should be compatible with the single colon representation of the existing pseudo elements in CSS1 and 2, and be not compatible with the single colon representation of the new pseudo elements introduced by CSS3. Later, we all know that because of the compatibility of earlier versions of IE with double colons, almost all cssers use single colons when writing styles. This virtually extends the obfuscation. The use of new pseudo elements in CSS3 is far from a climate.

Precautions for using pseudo classes and pseudo elements 
After understanding the differences, you need to pay attention to and consider some practical problems. For example, how to calculate the particularity (priority) of the selector of pseudo classes and pseudo elements?
In my previous article on CSS selector distance independence, I translated the particularity of CSS standard computing selector. After reading that part, the answer is clear: apart from the special rules for denying pseudo classes, they are calculated separately as real classes and elements.
Although the standard and later versions may allow the selector to have multiple pseudo elements, so far, the pseudo elements can only appear once in a selector and can only appear at the end. In fact, a pseudo element selects a logical but non-existent part of an element, so no one will mistakenly write it into multiple parts in the application. A pseudo-class plays the role of a class just like a real class. There is no limit on the quantity. As long as it is not a mutually exclusive pseudo-class, it can also be used on the same element at the same time. For a detailed explanation of the CSS3 selector, we recommend rogerjohansson's CSS 3 selectors explained.

Conclusion 
I just wanted to write a little bit, but I didn't want to talk about it anymore... At the end, I felt that I had missed a lot and kept searching in my mind. However, I could only add it next time. The purpose of writing this article is to pave the way for the next article "typical application of CSS pseudo-classes and CSS pseudo elements". As soon as I write something I don't want to talk about, I am confused... Looking back at this article, my ideas are a little messy. There may be a few words in summary, but if you want to express it as clearly as possible, you will inevitably have to overhead redundancy. The theory is always a bit boring. I should not be so dull when I talk about the application in the next article :)