What do one colon and two colons mean in CSS?

One colon is a pseudo-class, and two colons are pseudo-elements.

(Recommended learning: css quick start)

Pseudo classes can assign styles independently of the elements of the document, and can be assigned to any element, logically It is similar to a class in function, but it is predefined, does not exist in the document tree, and is expressed in a different way, so it is called a pseudo class.

The content controlled by a pseudo element is the same as the content controlled by an element, but the pseudo element does not exist in the document tree and is not a real element, so it is called a pseudo element.

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

Pseudo elements include: :first-line, :first-letter , :before, :after

The difference between pseudo-class and pseudo-element:

pseudo-class

pseudo-class select element It is based on the current state of the element, or the current characteristics of the element, rather than static signs such as the element's id, class, and attributes.

Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. It can be seen from this that its function is somewhat similar to that of class, but it is based on abstraction outside of the document, so it is called a pseudo class.

:link

Pseudo class will be applied to unvisited links and is mutually exclusive with :visited.

:hover

Pseudo class will be applied to the element that the mouse pointer is hovering over.

:active

Pseudo class will be applied to activated elements, such as clicked links, pressed buttons, etc.

:visited

The pseudo class will be applied to links that have been visited, and is mutually exclusive with :link.

:focus

Pseudo class will be applied to elements that have keyboard input focus.

:first-child

The pseudo-class will be applied when the element first appears on the page.

:lang

The pseudo-class will be applied to elements with the specified lang.

Pseudo-element

Different from pseudo-classes that target elements in a special state, pseudo-elements operate on specific content in the element, and the levels it operates on are relatively Pseudo-classes are one level deeper and therefore much less dynamic than pseudo-classes.

In fact, the purpose of designing pseudo-elements is to select the first letter (letter) and first line of element content, and select the front or back of certain content, which is something that ordinary selectors cannot do. The content it controls is actually the same as the element, but it is only an abstraction based on the element and does not exist in the document, so it is called a pseudo element.

::first-letter

The style of the pseudo-element will be applied to the first letter (letter) of the element's text.

::first-line

The pseudo-element's style will be applied to the first line of the element's text.

::before

Add new content at the front of the element content.

::after

Add new content at the end of the element content.

::before and ::after are often used with CSS content generation.

The above is the detailed content of What do one colon and two colons mean in CSS?. For more information, please follow other related articles on the PHP Chinese website!