CSS Pseudo-classes là gì? Hướng dẫn đầy đủ và ví dụ

Bạn muốn thay đổi màu sắc của một nút khi di chuột qua? Hay tạo kiểu cho hàng chẵn và lẻ trong một bảng? Đó chính là sức mạnh của Pseudo-classes trong CSS. Đây không phải là những lớp CSS thông thường bạn thêm vào HTML. Thay vào đó, chúng là những ‘trạng thái đặc biệt’ giúp bạn tạo kiểu cho các phần tử một cách linh hoạt và sống động. Hãy cùng WiWeb tìm hiểu từ A-Z về công cụ mạnh mẽ này nhé!

Pseudo-class là gì?

Nếu bạn đã quen thuộc với CSS, chắc hẳn bạn đã sử dụng các CSS selectors như h1 hay .button để chọn và tạo kiểu cho các phần tử. Pseudo-class là một từ khóa được thêm vào các bộ chọn đó, cho phép bạn định dạng một phần tử dựa trên một trạng thái đặc biệt hoặc vị trí của nó.

Định nghĩa và vai trò trong bộ chọn CSS (CSS Selector)

Hãy nghĩ đơn giản thế này: Pseudo-class trả lời câu hỏi ‘Phần tử này đang ở trạng thái nào?’. Nó không được định nghĩa trong mã HTML của bạn. Thay vào đó, nó được trình duyệt tự động áp dụng khi một sự kiện nhất định xảy ra. Ví dụ, khi người dùng di chuột qua một liên kết, trình duyệt sẽ tạm thời gán cho liên kết đó trạng thái :hover.

Vai trò của chúng là làm cho các bộ chọn CSS của bạn trở nên thông minh và linh hoạt hơn rất nhiều. Bạn có thể tạo ra các giao diện tương tác cao mà không cần dùng đến JavaScript.

Ví dụ về Pseudo-class: Hiểu ngay với :hover

Ví dụ kinh điển và dễ hiểu nhất chính là :hover. Hãy tưởng tượng bạn có một nút bấm.

/* Kiểu dáng nút ban đầu */
.my-button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

/* Khi người dùng di chuột qua nút */
.my-button:hover {
  background-color: #0056b3;
}

Với đoạn mã trên, nút .my-button sẽ đổi màu nền khi người dùng di chuột lên nó. Trạng thái :hover được kích hoạt, và các quy tắc CSS bên trong nó sẽ được áp dụng. Rất trực quan phải không?

Hướng dẫn cú pháp sử dụng Pseudo-class trong CSS

Cú pháp của pseudo-class rất dễ nhớ. Bạn chỉ cần thêm dấu hai chấm (:) ngay sau bộ chọn chính, không có khoảng trắng.

Cú pháp chung:

selector:pseudo-class {
  property: value;
}

Trong đó:

• selector: Là phần tử HTML bạn muốn nhắm đến (ví dụ: a, p, .btn).
• :pseudo-class: Là trạng thái đặc biệt bạn muốn áp dụng (ví dụ: :hover, :focus, :first-child).

Phân biệt Pseudo-class với Class và Pseudo-element

Trong quá trình học CSS, nhiều bạn thường nhầm lẫn giữa Pseudo-class, Class và Pseudo-element. WiWeb sẽ giúp bạn phân biệt chúng một cách rạch ròi để sử dụng cho đúng mục đích.

Sự khác biệt cốt lõi: Pseudo-class và Pseudo-element

Đây là cặp đôi dễ gây nhầm lẫn nhất. Điểm khác biệt mấu chốt nằm ở đối tượng mà chúng tác động đến:

• Pseudo-class (:): Tạo kiểu cho một phần tử hoàn chỉnh dựa trên trạng thái của nó. Ví dụ: :hover tạo kiểu cho toàn bộ thẻ <a> khi được di chuột qua.
• Pseudo-element (::): Tạo kiểu cho một phần cụ thể bên trong một phần tử. Ví dụ: ::first-line chỉ tạo kiểu cho dòng đầu tiên của một đoạn văn p, chứ không phải toàn bộ đoạn văn.

Một mẹo nhỏ để phân biệt là cú pháp. Theo tiêu chuẩn CSS3, pseudo-class dùng một dấu hai chấm (:) còn pseudo-element dùng hai dấu hai chấm (::). Mặc dù trình duyệt vẫn hiểu ::before khi bạn viết là :before, chúng tôi khuyên bạn nên tuân thủ quy tắc :: để mã nguồn rõ ràng hơn.

So sánh Class và Pseudo-class: Khi nào dùng cái nào?

Sự khác biệt giữa Class và Pseudo-class thì rõ ràng hơn nhiều.

• Class (.ten-class): Do bạn chủ động định nghĩa và thêm vào thẻ HTML. Nó là một thuộc tính cố định. Bạn dùng Class để nhóm các phần tử có chung một kiểu dáng nhất định.
  • Ví dụ: Bạn muốn tất cả các nút ‘Gửi’ có màu xanh. Bạn sẽ tạo một class .btn-submit và gán vào các nút đó trong HTML.
• Pseudo-class (:trang-thai): Do trình duyệt tự động áp dụng dựa trên hành vi của người dùng hoặc cấu trúc của trang. Nó mang tính động và tạm thời.
  • Ví dụ: Bạn không thể thêm hover vào thẻ HTML. Trình duyệt sẽ tự nhận biết khi nào người dùng di chuột qua để áp dụng :hover.

Kết luận nhanh: Dùng Class khi bạn muốn tạo kiểu cố định, có chủ đích. Dùng Pseudo-class khi bạn muốn tạo kiểu dựa trên trạng thái hoặc vị trí động của phần tử.

Danh sách các Pseudo-class phổ biến nhất (Kèm ví dụ chi tiết)

Thế giới của Pseudo-classes rất đa dạng. Dưới đây là những nhóm phổ biến nhất mà bạn sẽ sử dụng hàng ngày trong các dự án phát triển web.

Bốn Pseudo-class cơ bản cho liên kết (:link, :visited, :hover, :active)

Đây là bộ tứ không thể thiếu khi làm việc với các thẻ <a>. Chúng giúp cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan.

• :link: Chọn các liên kết chưa được người dùng truy cập.
• :visited: Chọn các liên kết đã được truy cập.
• :hover: Chọn liên kết khi người dùng di chuột qua.
• :active: Chọn liên kết ngay tại thời điểm nó được nhấp chuột.

Lưu ý quan trọng: Để hoạt động đúng, bạn nên tuân thủ thứ tự LVHA: link -> visited -> hover -> active.

/* Link chưa truy cập */
a:link {
  color: blue;
}

/* Link đã truy cập */
a:visited {
  color: purple;
}

/* Khi di chuột qua */
a:hover {
  color: red;
  text-decoration: underline;
}

/* Khi nhấp chuột */
a:active {
  color: orange;
}

Pseudo-classes cho trạng thái người dùng (User Action)

Nhóm này liên quan đến các hành động mà người dùng thực hiện, chủ yếu là với các phần tử trong form.

• :focus: Áp dụng khi một phần tử (thường là input, textarea) được chọn. Rất hữu ích để làm nổi bật ô nhập liệu người dùng đang gõ.

input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,.5);
}

Pseudo-classes cấu trúc và vị trí (:first-child, :nth-child())

Nhóm này cực kỳ mạnh mẽ, cho phép bạn chọn phần tử dựa trên vị trí của nó trong cây DOM.

• :first-child: Chọn phần tử đầu tiên trong số các anh em của nó.
• :last-child: Chọn phần tử cuối cùng.
• :nth-child(n): Chọn phần tử dựa trên một công thức. Đây là pseudo-class linh hoạt nhất.
  • :nth-child(2): Chọn phần tử thứ hai.
  • :nth-child(even): Chọn các phần tử chẵn (2, 4, 6…).
  • :nth-child(odd): Chọn các phần tử lẻ (1, 3, 5…).
  • :nth-child(3n): Chọn các phần tử là bội số của 3 (3, 6, 9…).

/* Tô màu nền cho các hàng chẵn trong danh sách */
li:nth-child(even) {
  background-color: #f2f2f2;
}

/* In đậm cho mục đầu tiên */
li:first-child {
  font-weight: bold;
}

Pseudo-classes cho trạng thái của Form Input

Nhóm này giúp tạo kiểu cho các ô nhập liệu dựa trên trạng thái của chúng.

• :checked: Áp dụng cho checkbox hoặc radio button khi được chọn.
• :disabled: Áp dụng cho các phần tử input bị vô hiệu hóa.
• :required: Chọn các ô input có thuộc tính required.
• :valid / :invalid: Chọn các ô input có giá trị hợp lệ hoặc không hợp lệ (ví dụ: một input type="email" có giá trị không phải email).

/* Khi checkbox được tích, label bên cạnh nó đổi màu */
input[type="checkbox"]:checked + label {
  color: green;
}

/* Làm mờ các ô input bị vô hiệu hóa */
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Các Pseudo-class khác cần biết (:not(), :empty)

• :not(selector): Chọn mọi phần tử không khớp với bộ chọn bên trong. Rất hữu ích để loại trừ một phần tử cụ thể.
• :empty: Chọn các phần tử không có con (kể cả text).

/* Thêm viền cho tất cả các thẻ p, trừ thẻ có class .no-border */
p:not(.no-border) {
  border: 1px solid #ccc;
}

/* Ẩn các thẻ div rỗng */
div:empty {
  display: none;
}

Lời kết

Qua các ví dụ trên, bạn có thể thấy Pseudo-classes là một phần không thể thiếu của CSS hiện đại. Chúng giúp bạn viết mã sạch hơn, giảm sự phụ thuộc vào JavaScript và tạo ra các trang web có tính tương tác cao.

Để bạn dễ hình dung, đây là những lúc bạn nên nghĩ ngay đến Pseudo-classes:

• Tạo hiệu ứng tương tác: Thay đổi kiểu dáng của nút, link khi người dùng di chuột, nhấp chuột hoặc focus.
• Tạo kiểu cho danh sách/bảng: Dùng :nth-child() để tạo các hàng có màu xen kẽ (zebra striping), giúp dữ liệu dễ đọc hơn.
• Định dạng Form: Cung cấp phản hồi trực quan cho người dùng về trạng thái của các ô nhập liệu (hợp lệ, không hợp lệ, bắt buộc…).
• Chọn phần tử đặc biệt: Nhắm đến phần tử đầu tiên, cuối cùng, hoặc loại trừ một phần tử cụ thể khỏi một nhóm quy tắc chung.
• Ghi nhớ thứ tự LVHA: Luôn viết CSS cho liên kết theo thứ tự :link, :visited, :hover, :active để tránh các quy tắc bị ghi đè không mong muốn.
• Sử dụng :focus-visible thay cho :focus: :focus sẽ kích hoạt cho cả người dùng chuột và bàn phím. :focus-visible thông minh hơn, nó chỉ hiển thị viền focus cho người dùng điều hướng bằng bàn phím, giúp giao diện gọn gàng hơn.
• Kết hợp các Pseudo-classes: Bạn có thể kết hợp chúng với nhau. Ví dụ, a:not(.external):hover sẽ chọn các liên kết không có class .external khi được di chuột qua.

Sử dụng thành thạo Pseudo-classes sẽ nâng tầm kỹ năng CSS của bạn. Chúng giúp bạn giải quyết nhiều vấn đề về giao diện một cách thanh lịch và hiệu quả.

Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại ý kiến của bạn ở phần bình luận nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!