search
HomeWeb Front-endCSS TutorialPseudo-classes and pseudo-elements in CSS and the differences between them

This article mainly introduces the detailed explanation of pseudo-classes and pseudo-elements in CSS and the differences between them. In fact, CSS3 standardizes a simple and crude method, that is, using a pseudo-class before It is represented by a colon, and two colons are used before the pseudo element, so that it is not easily confused. Friends in need can refer to

The concept and function of CSS pseudo-class
#CSS pseudo-classes (Pseudoclasses) are the bolts of selectors, used to specify the state of one or related selectors. Their form is selector:pseudoclass{property:value;}, simply use a half-width English colon (:) to separate the selector and pseudo-class.
CSS Many suggestions are not supported by browsers, but there are four CSS pseudo-classes that can be used safely for connections.
1.link is used for access connections.
2.visited is used on already visited connections.
3.hover is used for the connection on which the mouse cursor is placed.
4.active is used for connections that gain focus (for example, being clicked).
For example:

ExampleSourceCode   
a:link{     
color:red
}     
a:visited{     
color:green
}     
a:hover{     
color:blue
}     
a:active{     
color:orange     
}


Note:

Although CSS gives you bypass control, using different colors to indicate that accessed connections are A good habit because many users still expect this. CSS pseudo-classes (except hover) are not commonly used, and I'm afraid they are not as commonly used in the past. Therefore, it is not as useful as it used to be. But if you can collect users' opinions, you will find that it should be used.
Traditionally, connection text is blue and visited connections are purple. Perhaps, this is the most effective and useful color. However, with the widespread development of CSS, this color is no longer commonplace, and users no longer assume that connections must be blue or purple.
You should also be able to use the hover pseudo-class on other elements besides connections. Unfortunately, InternetExplore does not support this. This is really a huge annoyance.


Pseudo-elements
In fact, pseudo-elements in CSS do not exist in HTML, and they are usually used for special processing of certain elements. Only then will
commonly used pseudo-element be used:
:
:first-lineYou can specify the style of the first line of the p element
:
:first-letter You can specify the style of the first word of the p element
::selection
Define the effect of user highlight
:
:beforeIn the element Insert content before
:
:afterInsert content after the element
Example HTML

<p>
    臣亮言,先帝創業未半<br>

    每天,天剛亮時,我母親便把我喊醒,叫我披衣坐起。我從不知道她醒來坐了多久了。   
</p>


##first-line and first-letter

/* 第一行樣式 */
p::first-line {   
    color: red;   
}   
/* 開頭第一個字樣式 */
p::first-letter {   
    font-size: 30px;   
}   
selection   
// 反白後的效果   
p::selection {   
    background: red;   
    color: #FFF;   
}   
// Firefox   
p::-moz-selection {   
    background: red;   
    color: #FFF;   
}

The difference between pseudo-class and pseudo-element:First, read
w3c
for both Definition: 1.CSS pseudo-classes are used to add special effects to certain selectors. 2.CSS pseudo-elements are used to add special effects to certain selectors.
Two points can be made clear. The first is that both are related to the selector, and the second is to add some "special" effects. The special thing here is that the two describe things that other css cannot describe.
Pseudo-class type

Pseudo-classes and pseudo-elements in CSS and the differences between themPseudo-element type


Pseudo-classes and pseudo-elements in CSS and the differences between themDifference

Pseudo-class is used here

:first- child
and pseudo-element:first-letter to compare.

p>i:first-child {color: red}   
<p>   
    <i>first</i>   
    <i>second</i>   
</p>


//Pseudo-class: first-child Add style to the first child element

If we do not use pseudo-classes and want to achieve the above effect , you can do this: Pseudo-classes and pseudo-elements in CSS and the differences between them

.first-child {color: red}   
<p>   
    <i class="first-child">first</i>   
    <i>second</i>   
</p>


That is, we add a class to the first child element, and then define the style of this class. Then let's look at adding styles to the first letter for the element:

p:first-letter {color: red}   
<p>I am stephen lee.</p>


//Pseudo element: first-letter

So if we don't use Pseudo elements, what should be done to achieve the above effect? Pseudo-classes and pseudo-elements in CSS and the differences between them

.first-letter {color: red}   
<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>


That is, we add a span to the first letter, and then add a style to the span.

The difference between the two has come out. That is:


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.


总结
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

:Pseudo-classes   
::Pseudo-elements


但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

The above is the detailed content of Pseudo-classes and pseudo-elements in CSS and the differences between them. 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
So Many Color LinksSo Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxHow Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesMoving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchOne Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactDomain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersDetecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo   ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools