What do css3 pseudo-classes and pseudo-elements mean?-Front-end Q&A-php.cn

In CSS3, pseudo-class is a selector used to add corresponding styles to existing elements when they are in a certain state, and this state changes dynamically based on user behavior; while pseudo-elements Meaning "fake element" or "disguise element", it is a selector used to create some elements that are not in the DOM tree and add styles to them.

What do css3 pseudo-classes and pseudo-elements mean?

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

What is a pseudo-class?

Pseudo-class is a type used when an existing element is in a certain state ( Sliding, clicking, etc.) adds a selector of corresponding style to it, and this state changes dynamically based on user behavior.

For example: when the user hovers over a specified element, you can use :hover to describe the state of this element. Although it is similar to general CSS and can add styles to existing elements, it can only be in the DOM tree. Styles can be added to elements only in the described state, so they are called pseudo-classes.

What is a pseudo element?

Pseudo elementThe straightforward understanding is "fake element" or "disguise element". In fact, it can be understood this way. Pseudo elements are actually virtual elements. Elements that do not exist (in code form), and you cannot find them in the document, so pseudo elements are virtual elements.

Pseudo element is a selector used to create some elements that are not in the DOM tree and add styles to them.

With pseudo-elements you can define styles for specific parts of the selected element without resorting to the element's ID or class attributes. For example, through pseudo-elements you can set the style of the first letter in a paragraph, or insert some content before or after the element, etc.

The difference between pseudo-classes and pseudo-elements:

Please see the following example:

Example 1:

<ul>
  <li>第一列</li>
  <li>第二列</li>
</ul>

Copy after login

If we want to add a style to the first column, we can do it in the following two ways:

(1) Add a class to the first column and in the class Define the style:

<ul>
  <li class="first-item">第一列</li> 
  <li>第二列</li></ul>
</ul>

Copy after login

.first-item{color:orange;}

Copy after login

(2) If there is no need to add a class method, we can add a style to the first

by setting: first-child pseudo-class. At this time, the modified li still exists in the DOM tree

<ul>
  <li>第一个</li>
  <li>第二个</li>
</ul>

Copy after login

li:first-child{color:orage;}

Copy after login

Example 2:

<p>Hello World, and wish you have a good day!</p>

Copy after login

If you want to add a style to the first letter of the paragraph, you can use the following methods:

(1) Wrap the element to the first letter and set the style for span:

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p>

Copy after login

.first{color:red;}

Copy after login

(2) If the element is not created, we can pass it to

<p>Hello World, and wish you have a good day!</p>

Copy after login

p:first-letter{color:red;}

Copy after login

From the above example, we can see that the operating object of the pseudo class is an existing element in the document tree, while the pseudo element creates an element outside the document tree. Therefore, the difference between pseudo-classes and pseudo-elements is whether or not an element outside the document tree is created.

Use single colon or double colon for pseudo elements?

The css3 specification requires the use of double colons (::) to represent pseudo-elements to distinguish pseudo-classes and pseudo-elements, such as ::before and :: Pseudo-elements such as after use double colons (::), and pseudo-classes :hover and :active use single colons (:). Except for some browsers lower than IE8, most browsers support the double colon (::) representation method of pseudo-elements.

However, except for a few pseudo-elements such as ::backdrop that must use double colons (::), most pseudo-elements support single colon and double colon writing, such as: :after, written as :after can also run normally.

The w3c standard states that although the CSS3 standard requires pseudo elements to be written with double colons, single colon writing is still supported. For backward compatibility, we recommend that you still use the single colon writing method for now.

Commonly used pseudo-classes are:

:active selects the element that is being activated (matches the specified state)
:hover selects the element that is hovered by the mouse (matches the specified state)
:link selects the element that has not been visited (matches the specified state)
:visited Selects the element that has been visited (matches the specified status)
:first-child Selects the element that is the first child element of its parent element
:lang(value) Selects the element with the specified lang attribute
:focus Selects the element with keyboard input focus
:enable Selects every enabled element
:disable Selects every disabled element
:checked Select each selected element
:target Select the current anchor element
:first-of-type Select if its parent The element's first child element of a certain type
:last-of-type selects the element that is the last child element of a certain type of its parent element
:only-of-type selects the element that satisfies Is the only element of a certain type of child element of its parent element
:nth-of-type(n) Selects the element that is the nth child element of a certain type of its parent element
:nth-last-of-type(n) Selects the nth element of a certain type that is the penultimate of its parent element
:only-child selects the element that is the only child element of its parent element
:last-child selects the element that is the last element of its parent element
:nth-child(n) Selects the element that is the nth child element of its parent element
:nth-last-child(n) Selects the element that satisfies The element that is the nth child element from the last to the last of its parent element
:empty selects the element that has no child elements
:in-range selects Satisfies the elements whose value is within the specified range
:out-of-range Selects the elements whose value is not within the specified range
:invalid Selects the condition that satisfies Elements whose value is an invalid value
:valid Select elements whose value is a valid value
:not(selector) Select elements which do not satisfy the selector Element
:optional Select a form element that is optional, that is, there is no "required" attribute
:read-only Select "readonly" The form element
:read-write selects the form element without "readonly"
:root selects the root element

Commonly used pseudo-elements

::first-letter Selects the first word of the specified element
::first-line Selects the first line of the specified element
::after Inserts content before the content of the specified element
: :before Insert content after the content of the specified element
::selection Select the content selected by the user in the specified element

(Learning video sharing : css video tutorial)

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