Pseudo-class trong CSS là gì

CSS Pseudo Class là đại diện cho các trạng thái đặc biệt của các phần tử khác nhau, các lớp này không chỉ mô tả các phần tử cơ bản trong tài liệu mà còn các yếu tố bên ngoài của chúng như trạng thái, vị trí, lịch sử, v.v. Sử dụng các lớp giả này, nhà phát triển thậm chí có thể tạo kiểu cho các phần tử không thể chọn trực tiếp thông qua Bộ chọn CSS.

Cú pháp

Sau đây là cú pháp của việc sử dụng các lớp CSS Pseudo trên một phần tử -

Selector:pseudo-class {
   css-property: /*value*/;
}

Ví dụ

Hãy xem một ví dụ để sử dụng CSS Pseudo Class -

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input:valid {
   color: #fefefe;
   background-color: #4CAF50;
}
input:invalid {
   color: #fefefe;
   background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<label for="EmailSelect">Email :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">Password :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div>
</fieldset>
</form>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Khi các trường biểu mẫu có dữ liệu không hợp lệ -

Pseudo-class trong CSS là gì

Khi các trường biểu mẫu có dữ liệu hợp lệ -

Pseudo-class trong CSS là gì

Ví dụ

Hãy xem một ví dụ khác về các lớp CSS Pseudo -

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
a {
   text-decoration: none;
   background:grey;
   color: white;
   border-radius: 3px;
   padding: 6px;
}
input[type="button"] {
   border-radius: 10px;
}
:target {
   border:4px solid black;
   margin: 0 auto;
   height: 200px;
   width: 200px;
   background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
   border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">Tile</a>
<a href="#circle">Avatar</a>
</div>
</fieldset>
</form>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhấp vào bất kỳ nút nào -

Pseudo-class trong CSS là gì

Sau khi nhấp vào ‘Tile’ nút -

Pseudo-class trong CSS là gì

Sau khi nhấp vào ‘Hình đại diện’ nút -

Pseudo-class trong CSS là gì