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

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, respectively.

and CSS Selector Level 3

, both are already recommended standards.

Definition of the standard

In CSS2.1, 5.10 pseudo-elements and Pseudo-classes

Describes 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.

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 the fire is my blood. </span> I had created over a thoustand blades. Unknown to Death.nor known to life. There are withstood pain to create many weapon. Yet, those hands would 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 do not need to nest new elements, I only need to give the first existing   li   to add a class name:

 <ul>  <li class= "First-child" >< Span class= "Hljs-tag" ></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 be :before :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 :first-child by a colon
• Pseudo-elements are represented ::first-line with two colons

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.

Text excerpt from: http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/?

Kwai Zhong Jian @ Jian Empty

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