The difference and origin of CSS pseudo-class and CSS pseudo-elements

Just contact Pseudo-class and pseudo-elements, seniors recommend to read this article, at that time read several times did not read, still feel this article obscure difficult to understand, now re-read, feel really a good article, now share to everyone

To the blog from the Sunflower Sword @ Sword Empty

The text is as follows

The difference between the two is really an old question. But to this day, because of various network misinformation and some irresponsible books mistakenly, there are still quite a lot of people confuse pseudo-class with pseudo-elements, even many CSS veteran. Early in the beginning of the entry, I myself was deeply misled, because the forum most of the posts do not care about the nuances of this concept, even if someone came out and said: "These two are different", but also just more than the number of posts drowned. So I think it's necessary to write down the parts I know, and here's why the two are different, and some of the details that are usually easy to miss.

Whether pseudo-class or pseudo-element, it belongs to the category of CSS selectors. So their definitions can be found in the CSS Standard selector section. CSS2.1 selectors and CSS Selector level 3, respectively, are already recommended.

Definition of the standard

In CSS2.1, 5.10 pseudo-elements and Pseudo-classes describe the origins of these two concepts, which are mentioned together. But by the Selector level 3, they were separated into two sections to differentiate. However, the introduction of pseudo-classes and pseudo-elements is due to the fact that some information in the document tree cannot be adequately described, such as that CSS does not have a "first line of paragraph" selector, which is necessary in some publishing scenarios. In the words of the standard:

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outs IDE the document tree.

A simple translation is:

CSS introduces the concept of pseudo-classes and pseudo-elements in order to implement formatting based on information outside of the document tree

This is very abstract, in fact, to describe some of the existing CSS can not describe things. What is missing, what is introduced, whether it is a standard, or a person, is so growing up.

The difference between pseudo-class and pseudo-element

Here I can make a list of all pseudo-classes and pseudo-elements, but this is too formalized, rather than remembering "what is not," it is better to really differentiate. There is a fundamental difference between pseudo-class and pseudo-elements, which is directly reflected in the standard description statement.

Let's look at a pseudo first-line -element example. Now there is a piece of HTML, the content is a paragraph:

<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 would I do if I wanted to describe the first line of the paragraph, without pseudo-elements? Want to think I must nest a layer span , and then add the class name:

<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 example of a pseudo-class first-child , there is a simple list:

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

If I want to describe ul the first element, I don't need to nest new elements, I just need to li add a class name to the first one that already exists:

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

Although the first and first elements are similar in semantics, the final effect is completely different. So the fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements (abstractions). From the point of view of our imitation, if we need to add a new element to identify, it is pseudo-element, conversely, if you only need to add categories to the existing elements, is pseudo-class. And that's why the standard uses the word "create" precisely to explain pseudo-elements, and uses the term "classify" to explain the cause of the pseudo-class. One describes the newly created "Ghost" element, and the other describes an existing element that matches the "phantom" category.

The pseudo-class is simply used to represent the dynamic state of some elements, typically the various states of a link (LVHA). The CSS2 standard then expands its conceptual scope to make it a "ghost" category that is logically present but not necessarily identified in the document tree.

Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document tree.

The origin of pseudo-class and pseudo-element confusion

Most confusing, perhaps, is that most people will :before be :after casually called pseudo-classes with such pseudo-elements, and even in the case of conceptual confusion, there is no problem with actual use-because even if the concept is confusing, it does not cause much trouble with real use:)

CSS Selector Level 3 in order to distinguish between the two confusion, and deliberately separated by a colon:

• Pseudo-class is represented by a colon:first-child
• Pseudo-elements are represented with two colons::first-line

Also, the browser is compatible with the single-colon representation of both CSS1 and the existing pseudo-elements in 2, and also incompatible with the single-colon representation of the newly introduced pseudo-element CSS3. Later, as we all know, because the low version of IE on the double colon compatibility problem, almost all of the csser in the writing style when the same use of a single colon. This virtually, let this confusion continue down. and CSS3 the use of new pseudo-elements so far, is far from struggling.

Places to watch for use

After understanding the difference, we need to pay attention to and consider some problems in actual use. For example: How to calculate the selectors particularity (priority) of pseudo-class and pseudo-elements?

I was in the previous CSS selector distance irrelevant article, the translation of the CSS standard calculation selector of the particularity of this part, after reading that part, the answer is clear: in addition to the negation of the special provisions of pseudo-class, separate as the real class and the element calculation.

Although a later version of the standard may allow the selection of multiple pseudo-elements, the pseudo-elements can only appear once in a selector and only appear at the end of the day. In fact, a pseudo-element is an actual, but nonexistent, part of the logic that selects an element, so no one in the application will mistakenly write it as multiple. Pseudo-classes, like real classes, play the role of classes, with no quantitative limitations, as long as they are not mutually exclusive pseudo-classes, but can also be used on the same elements. For a detailed explanation of the CSS3 selector, the Rogerjohansson CSS 3 selectors explained is recommended.

Conclusion

Originally just want to write a little bit, do not want to talk more ... At the end of the time, I felt that I had missed a lot and kept searching in my mind, but I could only add the next one. The purpose of this article is for the next article "CSS Pseudo-class and CSS pseudo-elements of the typical application" to do a cushion, do not want to theory of something to write their own began to nonsense, ashamed ... Back to see this article, their own ideas jump a bit of chaos, voluminous so many words, may be summed up not a few words, but if you want to express as clearly as possible, it is inevitable redundant overdo. Theory always seems dull, the next chat application should not be so dull:)

Resources

1. CSS2.1 pseudo-elements and pseudo-classes from the consortium
2. Selectors Level 3 recommendation September
3. Difference between a pseudo-class and a pseudo-element by Laura L. Carlson
4. The difference between pseudo-classes and pseudo-elements by Stephan Muller

The difference and origin of CSS pseudo-class and CSS pseudo-elements