CSS properties: The difference between a CSS pseudo-class and a CSS pseudo-element (code attached)

CSS pseudo-elements and pseudo-classes may be confusing for students who just learn CSS, as the official documentation explains: CSS pseudo-classes are used to add special effects to certain selectors, and CSS pseudo-elements are used to add special effects to certain selectors. So, what is the difference between a CSS pseudo-element and a pseudo-class? This article is going to give you a thin saying.

First of all you can be clear two points, first: both are related to selectors, the second: is to add some "special" effect. The special point here is that the two describe css something else that cannot be described.

Pseudo-Class types

Pseudo class	Role
: Active	Add a style to an element that is activated
: Focus	Add a style to the selected element
: hover	Add a style to an element when the mouse hovers over the element
: Link	Add a special style to a link that has not been visited
: Visited	Add a special style to a link that has been visited
: First-child	Adds a special style to the first child element of an element
: lang	Allows the creator to define the language used in the specified element

Pseudo element Kind

Pseudo element	Role
: 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	Insert some content before an element
: After	Insert some content after an element

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 take a look at the element:

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.

At last

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.

Related articles recommended:

css-pseudo-class and pseudo-element _html/css_web-itnose

CSS properties: Before &&: The use of After, the difference between pseudo-class and pseudo-elements _html/css_web-itnose

What is a CSS pseudo-element? CSS pseudo-element usage explained