Reprinted -- difference and origin of CSS pseudo elements

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. What is rewritten here isWhy?The two are different, as well as some details that are easy to miss at ordinary times.

Whether it isPseudo classOrPseudo elementAll 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 look at a pseudo elementfirst-lineExample. Now there is an HTML section with the content as a paragraph:

1234	<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.</p>

What can I do if I want to describe the first line of this paragraph without pseudo elements? I have to nest a layer.spanAnd then add the Class Name:

1234

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

Another pseudo classfirst-childFor example, there is a simple list:

1234	<ul><li></li><li></li></ul>

If I want to describeulThe first element, I do not need to nest new elements, I only need to give the first existingliYou can add a Class Name:

1234	<ul><li class="first-child"></li><li></li></ul>

Although,First lineAndFirst elementThe meanings of the two are similar, but the final effect is completely different. Therefore, the fundamental difference between a pseudo-class and a pseudo-element is:Are they creating 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.

Pseudo classIn the beginning, it is only used to represent the dynamic states of some elements, typically the various statuses of links (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.

Pseudo elementIt indicates the 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 obfuscated, probably because most people:beforeAnd:after Such pseudo-elements are casually called pseudo-classes, and there is no problem in actual use even when the concepts are confused-because even if the concepts are 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: in addition to the special rules for denying pseudo classes,Separate them for true class and element computing.

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 :)

References

1. CSS2.1 Pseudo-elements and pseudo-classes from W3C
2. Selectors Level 3 W3C Recommendation 29 September 2011 from W3C
3. Difference between a pseudo-class and a pseudo-element by Laura L. Carlson
4. The difference between pseudo-classes and pseudo-ELEMENTS by Stephen Muller

 

----------------- Original address ---------------------

Differences and origins between CSS pseudo elements and CSS pseudo elements