Bạn có thực sự biết cách sử dụng Pseudo-classes?

Nhắc đến Pseudo-classes thì có thể nhiều người thấy lạ lẫm, nhưng nếu nói Pseudo-classes trong CSS chính là: hover, focus, active hay visited thì chắc hẳn là ai cũng biết rồi vì để tạo ra một trang web cơ bản thì những Pseudo-classes trên là vô cùng cần thiết!
Một pseudo-classes được sử dụng để xác định trạng thái đặc biệt của một phần tử. Ví dụ, chúng có thể được sử dụng để:

Vậy pseudo-classes là gì?

  • Định dạng một phần tử khi người dùng rê chuột vào đó
  • Định dạng đường dẫn khi đã và chưa được click vào
  • Định dạng một phần tử khi muốn gây chú ý vào đó

Cú pháp của pseudo-classes

Có những loại pseudo-class nào?

Có rất nhiều loại pseudo-class, tuy nhiên chúng ta hay dùng: hover, focus, active và visited là chủ yếu. Vậy nên mình sẽ giới thiệu sâu hơn về những pseudo-class nói trên.

1. :hover
thay đổi trạng thái khi rê chuột vào phần tử
Ví dụ:

Như vậy, sau khi viết CSS cho a:hover thì các đường dẫn sẽ có nền màu đỏ (#ff0000) và chữ màu trắng (#fff) khi rê chuột qua tên đường dẫn. Và trạng thái của đường dẫn sẽ trở về ban đầu khi rê chuột ra khỏi vùng của thẻ <a>.
Pseudo-class :hover rất hay được sử dụng để vẽ giao diện, đặc biệt là cho các button hoặc các thẻ <div> để hiển thị ra tooltip.

2. :focus
thay đổi trạng thái khi chọn một phần tử nào đó
Ví dụ

Như vậy, sau khi viết CSS cho input:focus thì khi click vào phần tử input màu nền input sẽ có màu đỏ (#ff0000). Và trạng thái của input sẽ trở về ban đầu khi click ra ngoài vùng input.
Lưu ý: :focus không dùng được cho thẻ <div>, :focus thường chỉ dùng với thẻ <button>, <input>, <a>.

3. :active
thay đổi trạng thái khi kích hoạt một phần tử nào đó, nó giống :focus ở điểm này. Tuy nhiên :active khác với :focus ở chỗ:
+ với :focus thì trạng thái chỉ trở về ban đầu khi ta chọn vào các vùng khác
+ với :active thì trạng thái trở về ban đầu ngay khi ta rê chuột ra khỏi vùng vừa kích hoạt, điểm này giống với :hover
Như vậy, cũng có thể nói :active là sự kết hợp của :focus và :hover.

4. :visited
Lưu ý: :visited chỉ dùng cho thẻ <a>
:visited thay đổi trạng thái cho các đường dẫn đã được kích hoạt và sẽ không trở lại trạng thái ban đầu


Trên đây là những hiểu biết và kinh nghiệm của mình khi tìm hiểu về Pseudo-classes.
Cảm ơn mọi người đã đón đọc!!!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *