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

Home

Web Front-end

Front-end Q&A

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

青灯夜游

Jan 13, 2022 pm 01:01 PM

css3Pseudo elementPseudo class

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>

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>

.first-item{color:orange;}

(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>

li:first-child{color:orage;}

Example 2:

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

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>

.first{color:red;}

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

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

p:first-letter{color:red;}

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

CSS ID and Class: common mistakesMay 13, 2025 am 12:11 AM

IDsshouldbeusedforJavaScripthooks,whileclassesarebetterforstyling.1)Useclassesforstylingtoallowforeasierreuseandavoidspecificityissues.2)UseIDsforJavaScripthookstouniquelyidentifyelements.3)Avoiddeepnestingtokeepselectorssimpleandimproveperformance.4

What is thedifference between class and id selector?May 12, 2025 am 12:13 AM

Classselectorsareversatileandreusable,whileidselectorsareuniqueandspecific.1)Useclassselectors(denotedby.)forstylingmultipleelementswithsharedcharacteristics.2)Useidselectors(denotedby#)forstylinguniqueelementsonapage.Classselectorsoffermoreflexibili

CSS IDs vs Classes: The real differencesMay 12, 2025 am 12:10 AM

IDsareuniqueidentifiersforsingleelements,whileclassesstylemultipleelements.1)UseIDsforuniqueelementsandJavaScripthooks.2)Useclassesforreusable,flexiblestylingacrossmultipleelements.

CSS: What if I use just classes?May 12, 2025 am 12:09 AM

Using a class-only selector can improve code reusability and maintainability, but requires managing class names and priorities. 1. Improve reusability and flexibility, 2. Combining multiple classes to create complex styles, 3. It may lead to lengthy class names and priorities, 4. The performance impact is small, 5. Follow best practices such as concise naming and usage conventions.

ID and Class Selectors in CSS: A Beginner's GuideMay 12, 2025 am 12:06 AM

ID and class selectors are used in CSS for unique and multi-element style settings respectively. 1. The ID selector (#) is suitable for a single element, such as a specific navigation menu. 2.Class selector (.) is used for multiple elements, such as unified button style. IDs should be used with caution, avoid excessive specificity, and prioritize class for improved style reusability and flexibility.

See all articles