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

##PropertiesCSS Version Inherit From ParentDescription##E:first -letter/E::first-letterE:first-line/E::first-lineE:before/E::beforeE:after/E::afterE::selection

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

Properties	Version	Inheritance	Introduction
CSS3/CSS1	None	CSS2/CSS1 E:first-letter/E::first-letter pseudo-object selector , sets the style of the first character within the object.
CSS3/CSS1	None	CS3/CSS1 Pseudo The object selector E:first-line/E::first-line sets the style of the first line within the object.
CSS3/CSS2	None	CSS3/CSS3 pseudo-object selector E :before/E::before, sets the content that occurs before the object (according to the logical structure of the object tree). Used with the content attribute
CSS3/CSS2	None	CSS3 /CSS2 pseudo-object selector E:after/E::after, sets the content that occurs after the object (according to the logical structure of the object tree). Used with the content attribute
CSS3	None	CSS3 pseudo-object selector E: :selection, sets the color of the object when it is selected.

##PropertiesCSS Version Inherit From ParentDescription##E:link E:visitedE:hoverE:activeE:focusE:lang()E:not()E:rootE:first-childE:last-childE:only-childE:nth-child(n)E:nth-last-child(n)E:first-of-typeE:last-of-typeE:only-of-typeE:nth-of-type(n)E:nth-last-of-type(n)E:emptyE:checkedE:enabledE:disabledE:target@page:first@page:left@page:right

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)

Properties	Version	Inheritance	Introduction
CSS1	None	CSS1 pseudo-class selector E:link, sets the style of hyperlink a before it is accessed.
CSS1	None	CSS1 pseudo-class selector E:visited, set the hyperlink a in it The link address has been accessed in an outdated style.
CSS2	None	CSS2/CSS1 pseudo-class selector E:hover, set the element in it Style on mouseover.
CSS2/CSS1	None	CSS2/CSS1 pseudo-class selector E:active, set element Style when activated by the user (an event that occurs between mouse click and release).
CSS2/CSS1	None	CSS2/CSS1 pseudo-class selector E:focus, set element Style when input focus occurs (the element's onfocus event occurs).
CSS2	None	CSS2 pseudo-class selector E:lang() matches using special E element of language.
CSS3	None	CSS3 pseudo-class selector E:not() matches does not contain The element E of the s selector.
CSS3	None	CSS3 pseudo-class selector E:root, matches the E element in the document root element.
CSS2	None	CSS2 pseudo-class selector E:first-child matches the parent element The first child element E.
CSS3	None	CSS3 pseudo-class selector E:last-child matches the parent element The last child element E.
CSS3	None	CSS3 For example, the selector E:only-child matches the parent element The only child element E.
CSS3	None	CSS3 pseudo-class selector E:nth-child (n) Matches the nth child element E of the parent element.
CSS3	None	CSS3 pseudo-class selector E:nth -last-child(n) matches the nth child element E from the bottom of the parent element.
CSS2	None	CSS3 pseudo-class selector E:first-of- type matches the first sibling element E of the same type.
CSS3	None	CSS3 pseudo-class selector E:last-of- type matches the last sibling element E of the same type.
CSS3	None	CSS3 pseudo-class selector E:only-of- type, matches the only sibling element E of the same type.
CSS3	None	CSS3 pseudo-class selector E:nth -of-type(n), matches the nth sibling element E of the same type.
CSS3	None	CSS3 pseudo-class selector E :nth-last-of-type(n) matches the penultimate nth sibling element E of the same type.
CSS3	None	CSS3 pseudo-class selector E:empty matches no child elements (including text node) element E.
CSS3	None	CSS3 pseudo-class selector E:checked matches the selected state on the user interface The element E. (For form elements with input type of radio and checkbox)
CSS3	None	CSS3 Pseudo The class selector E:enabled matches the element E in the enabled state on the user interface.
CSS3	None	CSS3 pseudo-class selector E:disabled matches the disabled state on the user interface The element E.
CSS3	None	CSS3 pseudo-class selector E:target matches the E element pointed to by the relevant URL .
CSS2	None	CSS2 pseudo-class selector @page:first sets the page container first The style used by the page. Only used for @page rules
CSS2	None	CSS2 pseudo-class selector @page: left sets the style used by all pages whose page container is located to the left of the gutter. Only used for @page rules
CSS2	None	CSS2 is the object selector @page: right sets the style used for all pages whose page container is located to the right of the gutter. Only for @page rules

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!