Sự khác biệt giữa Pseudo-Class và Pseudo-Element trong CSS

Lớp giả

Lớp giả đại diện cho trạng thái của một bộ chọn như:hover,:active,:last-child, v.v. Chúng bắt đầu bằng một dấu hai chấm (:).

Cú pháp của CSS pseudo-class như sau -

:pseudo-class{
   attribute: /*value*/
}

Phần tử giả

Tương tự, một phần tử giả được sử dụng để chọn các phần tử ảo như ::after, ::before, ::first-line, v.v.

Chúng bắt đầu bằng dấu hai chấm (::).

Cú pháp của phần tử giả CSS như sau -

::pseudo-element{
   attribute: /*value*/
}

Ví dụ

Các ví dụ sau minh họa thuộc tính lớp giả CSS và phần tử giả.

<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
   padding: 3%;
   font-size:1.4em;
   color: tomato;
   background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>

Đầu ra

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

Sự khác biệt giữa Pseudo-Class và Pseudo-Element trong CSS

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
   content: " BOOM!";
   background: hotpink;
}
p:last-child {
   font-size: 1.4em;
   color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>

Đầu ra

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

Sự khác biệt giữa Pseudo-Class và Pseudo-Element trong CSS