Pseudo-classes (lớp giả) và tất cả CSS Classes

Pseudo-class chọn element ở trạng thái đặc biệt: hover, active, visited, focus, first-child, nth-child...

Ví dụ: Link pseudo-classes

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    a {
      font-size: 18px;
      font-weight: bold;
      text-decoration: none;
    }
    a:link { color: rgb(17, 0, 255); }      /* Chưa click */
    a:visited { color: rgb(128, 0, 107); }  /* Đã click */
    a:hover { color: rgb(255, 105, 243); }  /* Di chuột qua */
    a:active { color: rgb(255, 153, 0); }   /* Đang click giữ */
  </style>
</head>
<body>
  <h1>Ví Dụ Pseudo-class</h1>
  <a href="#">Đây là văn bản link mẫu</a>
  <h2> Di chuột, click vào link trên để thấy pseudo-class hoạt động </h2>
</body>
</html>

Kết quả

• Link ban đầu: xanh dương đậm
• Hover: hồng sáng
• Click giữ: cam
• Sau khi click xong (visited): tím đậm

Các pseudo-class phổ biến khác