What is the difference between pseudo-classes and pseudo-objects (pseudo-elements) in css

Pseudo classes are used to add special effects to certain selectors; pseudo elements are used to add special effects to certain selectors. The effects of pseudo classes can be achieved by adding actual classes; the effects of pseudo objects can be achieved by adding actual elements. Simply put, their essential difference creates new elements whether abstract or not.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

The fundamental difference between pseudo-classes and pseudo-elements (pseudo-objects) is whether they create new elements.

Pseudo element/pseudo object: It does not exist in the DOM document. It is a virtual element and creates a new element. Represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.

Pseudo-object selector

Pseudo-class: A "ghost" category that exists logically in the DOM document but does not need to be identified in the document tree.

Pseudo-class selector

Let’s look at the description of the two applications in W3C:

Pseudo-class: used to add special effects to some selectors
Pseudo-element: used to Special effects are added to certain selectors
In fact, the basic meaning is to supplement those elements that cannot be selected by class, id, etc.

For example:

<div>
    <p>a</p>
    <p>b c</p>
</div>

If we want How to make the font color of the first p tag red? Using pseudo-classes will be very simple:

p:first-child {
    color: red;
}

But what should we do if we don’t use pseudo-classes? At this time we need to add a class class

<div>
    <p class="first-child">a</p>
    <p>b c</p>
</div>

p:first-child {
    color: red;
}

to the first p tag to achieve the same effect, but we need to write one more class

How to achieve the above operation if pseudo elements are used? ?

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

What should we do if we don’t use pseudo elements?

<div>
    <p><span>a</span></p>
    <p>b c</p>
</div>

p span {
    color: red;
}

You can see the difference between the two,

The effect of pseudo-class can be achieved by adding actual classes

The effect of pseudo-element can be Achieved by adding actual elements

So the essential difference between them is whether abstraction creates new elements

Note:

Pseudo classes can only be used “:”

The pseudo element can either use “:” or “::”

Because pseudo-classes are similar to adding classes, they can be multiple, while pseudo-elements can only appear once in a selector, and can only appear at the end

Related issues

Similarities and differences between:after/::after and :before/::before

Similar points:

can be used to represent pseudo-class objects and used to set the content before the object

:before and ::before writing methods are equivalent; :after and ::after writing methods are equivalent

Differences:

:before/:after is Css2 The way of writing, ::before/::after is the way of writing Css3

:before/:after has better compatibility than ::before/::after,

But in H5 development It is recommended to use::before/::after

Note:

Pseudo objects must be used together with the content attribute

Pseudo objects will not appear In the DOM, it cannot be operated through js. It is just to add

pseudo-object special effects to the CSS rendering layer. Usually, you need to use the :hover pseudo-class style to activate

eg: when the mouse moves over When span is on, insert "duang" before span

<style>
span{
  background: yellow;
}
span:hover::before{
  content:"duang";
}
</style>
 
<span>222</span>

(Learning video sharing: css video tutorial)

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