Chúng tôi có thể thêm các kiểu cụ thể vào các phần tử hiện có trong HTML bằng cách sử dụng các lớp CSS Pseudo chọn một phần tử có trạng thái cụ thể như (di chuột, đã truy cập, đã tắt, v.v.)
LƯU Ý - Để tách lớp CSS Pseudo khỏi Pseudo Elements, trong CSS3, các lớp giả sử dụng ký hiệu dấu hai chấm.
Cú pháp
Sau đây là cú pháp để sử dụng các lớp CSS Pseudo trên một phần tử -
Selector:pseudo-class {
css-property: /*value*/;
} Sau đây là tất cả các Lớp giả CSS có sẵn -
| Sr.No | Pseudo-Class &Description |
|---|---|
| 1 | hoạt động Nó chọn phần tử được đề cập tích cực |
| 2 | đã kiểm tra Nó chọn mọi phần tử được đề cập đã kiểm tra |
| 3 | bị vô hiệu hóa Nó chọn mọi phần tử được đề cập bị vô hiệu hóa |
| 4 | trống Nó chọn mọi phần tử được đề cập không có phần tử con |
| 5 | đã bật Nó chọn mọi phần tử được đề cập được kích hoạt |
| 6 | con đầu lòng Nó chọn mọi phần tử được đề cập là phần tử con đầu tiên của cha mẹ của nó |
| 7 | kiểu đầu tiên Nó chọn mọi phần tử là phần tử được đề cập đầu tiên trong cha mẹ của nó |
| 8 | tiêu điểm Nó chọn phần tử được đề cập có tiêu điểm |
| 9 | di chuột Nó chọn các phần tử được đề cập khi di chuột qua |
| 10 | trong phạm vi Nó chọn các phần tử được đề cập có giá trị trong một phạm vi được chỉ định |
| 11 | không hợp lệ Nó chọn tất cả các phần tử được đề cập có giá trị không hợp lệ |
| 12 | lang (ngôn ngữ) Nó chọn mọi phần tử được đề cập có giá trị thuộc tính lang bắt đầu bằng "ngôn ngữ" |
| 13 | con cuối cùng Nó chọn mọi phần tử được đề cập là con cuối cùng của cha mẹ của nó |
| 14 | loại cuối cùng Nó chọn mọi phần tử là phần tử được đề cập cuối cùng của phần tử cha của nó |
| 15 | liên kết Nó chọn tất cả các yếu tố chưa được đề cập |
| 16 | not (bộ chọn) Nó chọn mọi phần tử không phải là phần tử được đề cập |
| 17 | nth-child (n) Nó chọn mọi phần tử được đề cập là phần tử con thứ n của phần tử cha của nó |
| 18 | nth-last-child (n) Nó chọn mọi phần tử được đề cập là phần tử con thứ n của phần tử cha của nó, tính từ phần tử cuối cùng |
| 19 | nth-last-oftype (n) Nó chọn mọi phần tử được đề cập là phần tử được đề cập thứ n của phần tử cha của nó, tính từ phần tử cuối cùng |
| 20 | nth-of-type (n) Nó chọn mọi phần tử được đề cập là phần tử được đề cập thứ n của phần tử cha của nó |
| 21 | only-of-type Nó chọn mọi phần tử được đề cập là phần tử được đề cập duy nhất của nó |
| 22 | con một Nó chọn mọi phần tử được đề cập là phần tử con duy nhất của cha mẹ của nó |
| 23 | tùy chọn Nó chọn các phần tử được đề cập không có thuộc tính "bắt buộc" |
| 24 | ngoài phạm vi Nó chọn các phần tử được đề cập có giá trị bên ngoài một phạm vi được chỉ định |
| 25 | chỉ đọc Nó chọn các phần tử được đề cập với thuộc tính "chỉ đọc" được chỉ định |
| 26 | đọc-ghi Nó chọn các phần tử được đề cập không có thuộc tính "chỉ đọc" |
| 27 | bắt buộc Nó chọn các phần tử được đề cập với một thuộc tính "bắt buộc" được chỉ định |
| 28 | root Nó chọn phần tử gốc của tài liệu |
| 29 | target Nó chọn phần tử được đề cập hiện tại đang hoạt động (được nhấp vào URL có chứa tên liên kết đó) |
| 30 | hợp lệ Nó chọn tất cả các phần tử được đề cập có giá trị hợp lệ |
| 31 | đã ghé thăm Nó chọn tất cả các yếu tố được đề cập đã truy cập |
Ví dụ
Hãy xem một ví dụ về CSS Pseudo Class -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
Hãy xem một ví dụ khác về CSS Pseudo Class -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi không di chuột qua các phần tử div -
Khi di chuột qua các phần tử div -
