What are the pseudo-classes added in CSS3 and what are their functions?

The content of this article is about the pseudo-classes added in CSS3 and what are their functions? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Pseudo-classes and pseudo-elements

CSS pseudo-classes: used to add special effects to certain selectors.

CSS pseudo-element: used to add special effects to certain selectors. A 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 element	Function
::first-letter	Add style To the first letter of the text
::first-line	Add the style to the first line of the text
:: before	Insert some content before an element
::after	Insert some content after an element

The effect of pseudo-class can be achieved by adding an actual class, while the effect of pseudo-element needs to be achieved by adding an actual element. This is why one of them is called pseudo-class and the other is That's why it's called a pseudo-element.

In order to distinguish pseudo-classes and pseudo-elements, CSS3 has clearly stipulated that pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons. However, due to compatibility issues, most of them are still unified with a single colon. However, regardless of compatibility issues, we should try our best to develop good habits when writing and distinguish between the two.

Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements. A pseudo-element consists of a double colon and the name of the pseudo-element. However, the browser needs to support the old existing pseudo-element writing methods at the same time, such as: first-line, :first-letter, :before, :after, etc., while the new pseudo-elements introduced in CSS3 are no longer allowed to support the old ones. Single colon writing.

2. New pseudo-classes in CSS3

##p:last-of-type Selects each

element that is the last

element of its parent element.

p:only-of-type Selects every

element that is a unique

element of its parent element.

p:only-child Selects each

element that is the only child element of its parent element.

p:nth-child(n) Selects each

element that is the nth child element of its parent element.

##p:nth-last-child(n)p:nth-of-type(n)##p:nth-last-of-type(n) Select each element from the bottom of its parent element ;element. p:last-child Selects each

element that is the last child of its parent element.

p:empty Selects every

element (including text nodes) that has no child elements.

p:target Select the currently active

element.

:not(p) Selects every element that is not a

element.

:enabledControl the available state of the form control. :disabled Control the disabled state of the form control. :checked The radio button or check box is selected.

New pseudo-classes	Function
p:first-of-type	Selects each element that is the first element of its parent element.
Select each element that is the nth child element from the bottom of its parent element.
Selects each element that is the nth element of its parent element.

##Pseudo classFunctionAdd styles to mouse-over elementsAdd styles to activated elementsAdd styles to focused elementsAdd styles to unvisited linksAdd styles to visited linksAdd styles to visited links The first child element added to the elementdefines the language used in the specified elementRelated recommendations:

	:hover
	:active
	:focus
	:link
	:visited
	:first-child
	:lang

What are the types of css selectors? A brief introduction to commonly used selectors in css

What is css? Introduction to three css styles and text attributes

The above is the detailed content of What are the pseudo-classes added in CSS3 and what are their functions?. For more information, please follow other related articles on the PHP Chinese website!