search

Home >Web Front-end >CSS Tutorial >Use CSS pseudo-classes

Use CSS pseudo-classes

王林
王林forward
2023-09-03 18:41:011276browse

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>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.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Add shadow to image using CSS3Next article：Add shadow to image using CSS3

Related articles

See more