css attributes: the difference between css pseudo-classes and css pseudo-elements (with code)

css pseudo-elements and pseudo-classes may be easily confused for students who are just learning CSS. 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. Effects added to certain selectors. So, what is the difference between CSS pseudo-elements and pseudo-classes? This article will give you a detailed explanation.

First of all, two points can be made clear. First: both are related to the selector. Second: it is to add some "special" effects. The special thing here refers to the fact that the two describe things that other css cannot describe.

Pseudo-class type

Pseudo-class	Function
:active	Add styles to activated elements
:focus	Add styles to the selected element
:hover	Add to the element when the mouse is hovering over it Style
:link	Add special style to unvisited links
:visited	Add special styles to visited links
:first-child	will A special style is added to the first child element of the element
:lang	Allows the creator to define the language used within the specified element

Pseudo-element types

Pseudo-element	Function
: first-letter	Add special style to the first letter of the text
: first=line	Adds a special style to the first line of text
: before	Insert something before an element
：after	Insert something after an element

Difference

The pseudo-class :first-child and the pseudo-element :first-letter are used for comparison.

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

//Pseudo-class:first-child Add style to the first child element
If we do not use pseudo-classes and want to achieve the above effect, 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 this class. Then let's take a look at the element:

p:first-letter {color: red}
<p>I am stephen lee.</p>

//Pseudo element:first-letter Add style to the first letter
Then if we don't use Pseudo elements, what should be done to achieve the above effect?

.first-letter {color: red}
<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

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

The effect of pseudo-class can be achieved by adding an actual class, while the effect of pseudo-element needs to be achieved by adding an actual element. This is why one of them is called pseudo-class and the other is That's why it's called a pseudo-element.

Finally

The reason why pseudo-elements and pseudo-classes are so easy to confuse is because they have similar effects and similar writing methods, but in factcss3 In order to distinguish the two, it has been clearly stipulated that pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons.

:Pseudo-classes
::Pseudo-elements

But due to compatibility issues, most of them still use a single colon. However, regardless of compatibility issues, we should try our best to develop good habits when writing and distinguish between the two.

Recommended related articles:

css-pseudo-classes and pseudo-elements_html/css_WEB-ITnose

CSS properties: before && :Usage of after, the difference between pseudo-classes and pseudo-elements_html/css_WEB-ITnose

What are CSS pseudo-elements? Detailed explanation of CSS pseudo-element usage

The above is the detailed content of css attributes: the difference between css pseudo-classes and css pseudo-elements (with code). For more information, please follow other related articles on the PHP Chinese website!