Pseudo Class trong CSS là gì?

Pseudo Class trong CSS được sử dụng để viết CSS cho một trạng thái nào đó của một phần tử. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào,….Các pseudo class được khai báo tại vùng chọn, đặt đằng sau vùng chọn và có dấu hai chấm (:) ngăn cách. Ví dụ: #link:hover (vùng chọn của #link khi rê chuột vào).

Trong bài viết này, vì nó thuộc CSS căn bản nên mình chỉ nói qua một số pseudo class đơn giản nhất mà cũng thường gặp nhất khi viết CSS cho website

Một số Pseudo Class thông dụng

• :hover – Chọn trạng thái khi rê chuột vào một phần tử.
• :visited – Được sử dụng cho liên kết, chọn liên kết khi đã được truy cập (dựa vào History trên trình duyệt).
• :link – Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào.
• :active – Chọn phần tử khi họ chọn/nhấp vào.

Một số ví dụ về pseudo class đơn giản

Dưới đây là một số ví dụ cách sử dụng pseudo class trong CSS3, trong đó mình có ngứa tay làm thêm phần chuyển động với transition, nếu bạn chưa hiểu thì ở gần cuối serie mình có giải thích.

Rất hay và thiết thực phải không nào?