A word that makes you understand the difference between pseudo-elements and pseudo-classes

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.

Here's an example of this sentence.

Pseudo-Class: First-child

<div>    <p> I'm a paragraph </p>    <p> I'm a paragraph </p> <p>    I'm a paragraph </p>    < P> I was a paragraph </p>    <p> I was a paragraph </p><div>

Use pseudo-class to select the first paragraph

Div P:first-child{background-color:orang;}

If we do not use pseudo-classes to achieve the same effect, then we can do this: Add a class selector to the first paragraph

<div>    <p class= "First" > I am a paragraph </p>    <p> I am a paragraph </p>    <p> I am a paragraph </p >    <p> I'm a paragraph </p>    <p> I'm a paragraph </p><div>

Then set the style of the class selector

. First{background-color:orange;}

Pseudo-element: First-letter

<div>    <p> I'm a paragraph </p>    <p> I'm a paragraph </p> <p>    I'm a paragraph </p>    < P> I was a paragraph </p>    <p> I was a paragraph </p><div>

Now we use pseudo-elements to set the color of the first letter of all P elements under a div.

Div p:first-letter{color:red;}

If we want to achieve the same effect without using pseudo-elements, we need to insert a new tag element

<div>    <p><span> Me </span> is a paragraph </p>    <p><span> i </span> is a paragraph </p>    <p><span> I </span> is a paragraph </p>    <p><span> i </span> is a paragraph </p>    <p><span> I </span> is a paragraph </p><div>

Then set the style

div p Span{background:color;}

Summarize:

The pseudo-class selection element is based on the state in which the current element is present, or the attributes that the element currently has, not the static flags of the element's ID, class, attributes, and so on.

Because the state is dynamically changing, when an element reaches a certain state, it may get a pseudo-class style, and when the state changes, it loses the style.

As you can see, its function is somewhat similar to class, but it is based on abstractions outside of the document, so it is called a pseudo class.

Unlike pseudo-class elements that are specific to a particular state, a pseudo-element operates on a particular content in an element that operates at a level deeper than a pseudo-class, and therefore is much less dynamic than a pseudo-class. In fact, the purpose of designing pseudo-elements is to select the first word (mother), the first line of the element content, and select the work that the ordinary selector cannot do before or after some content. The content that it controls is actually the same as the element, but it is simply an abstraction based on elements that does not exist in the document, so it is called a pseudo-element.

A word that makes you understand the difference between pseudo-elements and pseudo-classes