Use CSS pseudo-classes-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Use CSS pseudo-classes

王林

Sep 03, 2023 pm 06:41 PM

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-

##1234567##8Focus910In scope11Invalid12lang 13 last-child## 14151617181920212223Out of rangeRead onlyread-writerequiredroottarget tr>

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 td>
	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
	It selects the above element that has focus
td>hover	Select the mentioned element on mouseover
	It selects mentioned elements with values within the specified range
	It selects all mentioned elements that have invalid values
	(Language )It selects every mentioned element whose lang attribute value starts with "language"
	The last child it selects as its parent
last-of -type	It selects every element last mentioned by its parent
Links	It selects all unvisited mention elements
not(selector)	It selects all elements that are not mentioned
nth-child(n )	It selects each mentioned element that is the nth child of its parent
nth-last-child(n)	It selects the nth child as its parent level for each mentioned element, counting from the last child
nth-last -oftype(n )	It selects each mentioned element, i.e. the nth mentioned element in its parent, counting from the last child element
nth-of-type(n)	It selects each mentioned element that is the nth of its parent element The mentioned element
only-of-type	is selected as its The only mention of each mentioned element that the parent element
only-child	It selects each mentioned element as the only child element of its parent
Optional	It selects the above element without the "required" attribute ##24
td>	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 id="Search-Engines">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 伪类

示例

让我们看一下 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 元素上时 -

Use CSS pseudo-classes

当鼠标悬停在 div 元素上时 -

Use CSS pseudo-classes

The above is the detailed content of Use CSS pseudo-classes. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

SMIL on?Apr 23, 2025 am 09:57 AM

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio