The difference between a CSS pseudo-class and a pseudo-element

pseudo-classes and pseudo-elements are independent of the document structure. The way they get the elements is not based on the element characteristics of the ID, class, attribute, but on the element that is in a special state (pseudo-Class), or the element's special content (pseudo-element). The difference is summarized as follows:

CSS pseudo-Class (pseudo-classes): Used to add special effects to certain selectors, that is, to add special effects (usually dynamic effects) on the basis of the current static style of an element, so that when an element reaches a particular state, it may get a pseudo-class style; It will lose this style again.

Property	Describe
: Active	Add a style to the element that is activated
: Focus	Add a style to an element that has keyboard input focus
: hover	Add a style to an element when the mouse hovers over the element
: Link	Add a style to a link that is not visited
: Visited	Add a style to a link that has been visited
: First-child	Add a style to the first child element of an element
: lang	Add a style to an element with the specified Lang property

Note: In the CSS definition, the same element: hover must be located in: Link,: Visited before it takes effect: active must be in: hover before it takes effect.

CSS Pseudo-elements (pseudo-elements): used to set special effects to certain selectors, is to set and manipulate specific content in the element, the operation level is deeper than pseudo-class, so the dynamic is worse than pseudo-class .

Property	Describe
: First-letter	Add a special style to the first letter of the text
: First-line	Add a special style to the first line of text
: Before	Adding content before an element
: After	Add content after an element

The w3c definition of both:

• CSSPseudo-classes are used to add special effects to certain selectors.

• CSSPseudo-elements are used to add special effects to certain selectors.

Difference

This :first-child is compared by pseudo-class and pseudo :first-letter -elements.

P>i:first-child {color:red}<p>    <i>first</i>    <i>second</i></p>

Pseudo-Class :first-child adds a style to the first child element
If we do not use pseudo-classes and want to achieve the above effects, we can do this:

. first-child {color:red}<p>    <i class= "First-child" >first</i>    <i>second</i> </p>

That is, we add a class to the first child element and then define the style of the class. So let's look at the pseudo-elements:

P::first-letter {color:red}<p>i am Stephen Lee.</p>

Pseudo elements ::first-letter add style to first letter
So if we do not use pseudo-elements, to achieve the above effect, what should be done?

. first-letter {color:red}<p><span class= ' first-letter ' >I</span> am Stephen Lee.</p>

That is, we add one to the first letter and span then give the span added style.
The difference between the two has come out. That is:

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.

Summarize

Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact css3 , in order to differentiate between them, it is clear that pseudo-classes are represented by a colon, while pseudo-elements are represented by two colons.

:P seudo-classes::P seudo-elements

But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.