Một vài pseudo class đơn giản

1. Một vài Pseudo Class đơn giản

2. • Đây có thể nói là bài hướng dẫn chi tiết từng tính năng trong
CSS cuối cùng của serie Học CSS đơn giản này và các bài sau
chúng ta sẽ làm qua một số ví dụ thực tế. Trước khi bắt đầu với
một số ví dụ đó, mình muốn nói qua một xíu về Pseudo
Class – một tính năng trong CSS3 mà mình sẽ nói kỹ hơn ở
serie CSS nâng cao sau này. Bởi vì trong các tutorial sau,
chúng ta sẽ cần sử dụng một vài Pseudo class thông dụng.
•

3. 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

4. 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.

5. 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.