Use CSS pseudo-classes
We can add specific styles to existing elements in HTML using CSS pseudo-classes that select elements with specific states, such as (hover, accessed, disabled, etc.)
Note strong> - To separate CSS pseudo-classes from pseudo-elements, in CSS3 pseudo-classes use single-colon notation.
Syntax
The following is the syntax for using CSS pseudo-classes on elements-
Selector:pseudo-class {
css-property: /*value*/;
}The following are all available CSS pseudo-classes-
| Sr.No | Pseudo class and description |
|---|---|
| ActivityIt selects the elements mentioned by the activity | |
| Checked It selects every checked mentioned element | |
| DisableIt selects every disabled mentioned element | |
| emptyIt selects Each mentioned element has no children | |
| enabledit selects Each enabled mentioned element | |
| first-child it selects Each mentioned element that is the first child of its parent | |
| first-of-type It selects the first mentioned element of each element whose parent | |
| Focus | It selects the above element that has focus |
| hover | Select the mentioned element on mouseover |
| In scope | It selects mentioned elements with values within the specified range |
| Invalid | It selects all mentioned elements that have invalid values |
| lang | (Language )It selects every mentioned element whose lang attribute value starts with "language" |
| last-child | The last child it selects as its parent | ## 14
| last-of -type | It selects every element last mentioned by its parent | 15
| Links | It selects all unvisited mention elements | 16
| not(selector) | It selects all elements that are not mentioned | 17
| nth-child(n ) | It selects each mentioned element that is the nth child of its parent | 18
| nth-last-child(n) | It selects the nth child as its parent level for each mentioned element, counting from the last child | 19
| nth-last -oftype(n ) | It selects each mentioned element, i.e. the nth mentioned element in its parent, counting from the last child element | 20
| nth-of-type(n) | It selects each mentioned element that is the nth of its parent element The mentioned element | 21
| only-of-type | is selected as its The only mention of each mentioned element that the parent element | 22
| only-child | It selects each mentioned element as the only child element of its parent | 23
| Optional | It selects the above element without the "required" attribute< /p> ##24 |
| It selects the mentioned elements whose values are outside the specified range
25 | |
| It uses "readonly" to select the mentioned element specified attribute 26 | |
| It selects the above elements without the "readonly" attribute 27 | |
| It selects mentioned elements that have the "required" attribute specified 28 | |
| It selects the root element of the document 29 | |
| it Select the currently mentioned active element (click the URL containing the anchor name) | |
| 30 | 有效 它选择具有有效值的所有提到的元素 |
| 31 | 访问过 它选择所有访问过的提到的元素 |
示例
让我们看一个 CSS 伪类的示例 -
现场演示
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>输出
这将产生以下输出 -
示例
让我们看一下 CSS 伪类的另一个示例 -
现场演示
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>输出
这将产生以下输出 -
当未将鼠标悬停在 div 元素上时 -
当鼠标悬停在 div 元素上时 -
The above is the detailed content of Use CSS pseudo-classes. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
