Repost: Specific explanation of the difference and origin of CSS pseudo-classes and CSS pseudo-elements_html/css_WEB-ITnose

The difference between the two is actually a very old question. But today, due to various misinformation on the Internet and some irresponsible book mistakes, there are still quite a few people who confuse pseudo-classes with pseudo-elements, including many CSS veterans. When I first entered the industry in the early years, I myself was deeply misled, because most of the posts in the forum did not care about the nuances of this concept. Even if someone came out and said: "these two are different", it would only be changed. It's just drowned out by too many posts. So I feel the need to write down these parts that I know. What I focus on here is why the two are different, as well as some details that are easy to miss.

Whether it is a pseudo-class or a pseudo-element, it belongs to the category of CSS selectors. So their definition can be found in the Selectors chapter of the CSS standard. They are CSS2.1 Selectors and CSS Selector Level 3, both of which are already recommended standards.
Standard Definition

In CSS2.1, 5.10 Pseudo-elements and pseudo-classes describes the origin of these two concepts, and they are mentioned together. But in Selector Level 3, they are separated into two sections to distinguish them. But 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 selectors such as "the first line of the paragraph", which is not possible in some publishing scenarios. Must. In the words of the standard:
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
A simple translation is:
CSS introduces pseudo-classes The concept of pseudo elements is to achieve formatting based on information outside the document tree
It’s very abstract to say so, but it’s actually to describe something that cannot be described by existing CSS. Whatever is lacking, something is introduced, whether it is standards or people, it all grows in this way.

The difference between pseudo-classes and pseudo-elements
I could make a table here to list all pseudo-classes and pseudo-elements separately, but this would be too formal and difficult to remember Rather than “what is and what is not”, it is better to truly differentiate. There is a fundamental difference between pseudo-classes and pseudo-elements, which is directly reflected in the standard description statements.
Let’s look at an example of pseudo-element first-line. Now there is a piece of HTML, the content is a paragraph:

Copy the code

The code is as follows:

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 many weapon.
Yet , those hands will never hold anything. So as I pray, unlimited blade works.

What would I do? I think I must nest a layer of spans, and then add the class name:

Copy the code

The code is 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 many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.

Looking at the example of pseudo-class first-child, there is a simple list:

Copy the code

The code is as follows:

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

Copy the code

The code is as follows:

• < ;/li>
  

Although the first line and the first element have similar semantics, their final effects are completely different. Therefore, the fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements (abstractions). From the perspective of imitating its meaning, if we need to add new elements to identify it, it is a pseudo-element. On the contrary, if we only need to add categories to existing elements, it is a pseudo-class. And that's why the standard uses the word "create" precisely to explain pseudo-elements, and the word "classify" to explain pseudo-classes. One describes a newly created "ghost" element, and the other describes an existing element that fits the "ghost" category.

The pseudo-class was initially used to represent the dynamic status of some elements, typically the status of links (LVHA). The CSS2 standard subsequently expanded its conceptual scope to include all "ghost" categories that logically exist but do not need to be identified in the document tree. The
pseudo element represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.

The origin of confusion between pseudo-classes and pseudo-elements
The most confusing thing may be that most people casually call pseudo-elements like :before and :after pseudo-classes, and even though In the case of conceptual confusion, there is no problem in actual use?? Because even if the concept is confused, it will not cause much trouble in actual use:)
CSS Selector Level 3 In order to distinguish the confusion between the two, it is specially used Colon to distinguish:
pseudo-class is represented by one colon: first-child
pseudo-element is represented by two colons:: first-line

and it is stipulated that the browser must be compatible with both CSS1 and 2 The single-colon representation of the existing pseudo-elements must be incompatible with the single-colon representation of the newly introduced pseudo-elements in CSS3. Everyone knows the subsequent result. Because of the compatibility issue with double colons in lower versions of IE, almost all CSSers invariably used single colons when writing styles. This invisibly perpetuates this confusion. The use of CSS3's new pseudo-elements has so far been far from practical.

What you need to pay attention to when using pseudo-classes and pseudo-elements
After understanding the difference, you need to pay attention to and consider some issues in actual use. For example: How to calculate the selector specificity (priority) of pseudo-classes and pseudo-elements?
In my previous article on distance-independent CSS selectors, I translated the special part of the CSS standard calculation selector. After reading that part, the answer is clear: in addition to negating the special provisions of pseudo-classes, separate each Calculated as true classes and elements.
Although future versions of the standard may allow selectors to have multiple pseudo-elements, for now, pseudo-elements can only appear once in a selector, and only at the end. In fact, a pseudo element is a logical but non-existent part of an element selected, so no one in the application will mistakenly write it as multiple. Pseudo-classes play the role of classes just like real classes. There is no limit on the number. As long as pseudo-classes are not mutually exclusive, they can also be used on the same element at the same time. For a detailed explanation of CSS3 selectors, I recommend rogerjohansson’s CSS 3 selectors explained.

Conclusion
Originally I just wanted to write a little bit, but I didn’t want to say too much... In the end, I felt that I had missed a lot and kept searching in my mind, but maybe it was just I can add it next time. The purpose of writing this article is to pave the way for the next article "Typical Applications of CSS Pseudo-Classes and CSS Pseudo-Elements". As soon as I write something that I don't want to be theoretical about, I start talking nonsense. I feel ashamed... Looking back at this article, my thoughts are jumping. It's a bit messy, with so many words, and it may not be summarized in a few sentences, but if you want to express it as clearly as possible, it will inevitably be too redundant. Theory always seems a bit boring, the next part about chat application should not be so boring :)