[Học CSS] Bài 16: Sử dụng Pseudo Class trong CSS

Trong bài này chúng ta sẽ tìm hiểu về Pseudo Class và cách sử dụng nó qua một số ví dụ cụ thể

Pseudo Class là gì?

Trong CSS, Pseudo Class có thể hiểu là lớp trạng thái của phần tử. Phần tử (vùng chọn) thì các bạn biết rồi. Còn trạng thái ở đây là gì ? Ví dụ bạn rê chuột vào một cái link trên bài viết thì link đó đổi sang màu xanh, nhấn vào nó hiện màu đỏ,.. Và sự thay đổi màu sắc của cái link kể từ lúc ta rê chuột, click vào làm nó được gọi là các trạng thái.

Một số Pseudo Class thường gặp

Trong bài viết này chúng ta sẽ đi tìm hiểu và thực hiện ví dụ với một số pseudo class thường gặp như sau:

  • :hover trạng thái khi rê chuột vào một phần tử.
  • :visited liên kết khi đã được truy cập.
  • :link liên kết khi chưa nhấp vào.
  • :active phần tử khi được click vào.

Sử dụng pseudo class

Trong ví dụ đầu tiên mình sẽ thực hiện với một cái liên kết với 03 trạng thái là: link “chưa động vào” (:link), khi rê chuột vào (:hover) và sau khi click (:visited).

Khi xem demo các bạn sẽ thấy rằng khi chưa đụng vào link thì nó có màu xanh dương, rê chuột vào thì nó có màu đỏ, sau click thì xem lại nó có màu xanh lá cây. Và đây là ví dụ dành cho text link.

Còn đối với vùng chọn là một cái box (khung) thì chúng ta sẽ làm như sau, copy vào codepen để xem nhé !

Các bạn sẽ thấy rằng trong ví dụ này chúng ta không có trạng thái cho link đã truy cập, vì nó là cái khung mà, không cần sử dụng trạng thái đó. Mà ở đây mình thêm vào trạng thái khi nhấn vào khung:active nó sẽ đổi màu thành xanh. Oke, ví dụ thì các bạn cứ tiếp tục xem và thực hành trên codepen nhé !

Bài này nội dung bao nhiêu đây, trong các bài tiếp theo chúng ta sẽ đi tìm hiểu thêm một số thuộc tính CSS nữa để tạo ra một phần nào đó trên website. Có thể là thanh menu hoặc widget.

Bài học trước đó và tiếp theo

Hocban.vn

Hocban.vn (học bạn chấm vn) là trang blog chia sẻ những kiến thức, kinh nghiệm về tạo lập và xây dựng website sử dụng WordPress & Blogspot.

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )