What do pseudo-classes and pseudo-objects mean in css

In css, pseudo-classes mean to define special states of elements. You can add some special effects of selectors, which are some features and functions given by css built-in classes. Pseudo-objects are special effects. Adding to certain selectors means that the effect can be achieved by adding actual elements.

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

What do pseudo-classes and pseudo-objects mean in css

Pseudo-class

css pseudo-class is used to define the special status of elements

CSS pseudo-classes are used to add some special effects to selectors.

Explanation: It feels like pseudo-classes can be dynamic. An element can gain or lose a pseudo-class when the user interacts with the document. The exceptions are ":first-child" which can be inferred from the document tree, and ":lang" which is also inferred from the document tree in some cases.

It can be seen that its function is somewhat similar to class, but it is based on abstraction outside of the document, so it is called a pseudo class. [1]

Pseudo classes include: :first-child, :link:, vistited, :hover:, :active, :focus, :lang, :right, :left, :first

What is a pseudo-class? It is the built-in class of css. The css itself gives it some characteristics and functions. That is, you don’t need class=... or id=..., you can use it directly. Of course, you can also change it. Some attributes such as: a:link{color:#FF0000;}

Many CSS suggestions are not supported by browsers, but there are four pseudo-classes that can be safely used on hyperlinks.

Syntax of pseudo class:

selector:pseudo-class {
  property: value;
}

Pseudo object

Pseudo element: used to add special effects to certain selectors

css pseudo-element represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.

Pseudo elements are used to create some elements that are not in the document tree and add styles to them. In fact, pseudo-elements are things that cannot be done by ordinary selectors before or after certain elements. The content of the control is the same as the element, but it itself is an element-based abstraction and does not exist in the document structure. For example, we can use :before to add some text in front of an element and add styles to this text.

Syntax of pseudo elements:

selector::pseudo-element{property:value;}
标签：伪元素{性质:值;}

CSS classes can also be used with pseudo elements:

selector.class::pseudo-element{property:value;}
标签类：伪元素{性质:值;}

(Learning video sharing: css video tutorial)

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