Khi thiết kế web, bạn thường muốn thay đổi style của phần tử khi người dùng đang kích hoạt nó - ví dụ: đổi màu nút bấm hoặc link khi click chuột. Đó là lúc pseudo-class :active phát huy tác dụng.
CSS Pseudo-classes Là Gì?
Selectors chọn phần tử để áp dụng style. Nhưng đôi khi bạn chỉ muốn style khi phần tử ở trạng thái đặc biệt: được click, được hover... Pseudo-classes là từ khóa thêm vào selector để chọn phần tử ở trạng thái cụ thể.
Bài này tập trung vào :active.
Tìm Hiểu :active Pseudo-class
:active chọn phần tử đang được kích hoạt bởi người dùng. Về mặt CSS, "kích hoạt" nghĩa là người dùng đang nhấn giữ chuột trên phần tử.
Thường dùng với <a> (link) và <button>. Ví dụ: đổi màu link thành đỏ khi click, đổi background button thành xanh nhạt khi click.
Khi người dùng thả chuột, phần tử không còn trạng thái "active", style :active không còn áp dụng.
Ví Dụ Thực Hành
1. Active Links - Link Khi Được Click
Trang "About" câu lạc bộ bài Wizards of the Boards. Link mặc định màu xanh nhạt, khi click thành cam.
<html>
<p>Wizards of the Boards là câu lạc bộ bài tại Philadelphia...
Để tìm hiểu trò chơi, <a href="/games.html">click here</a>.</p>
</html>
<style>
a { color: lightblue; }
a:active { color: orange; }
</style>
Khi click vào "click here", chữ tạm thời chuyển sang cam.
2. Active Buttons - Nút Khi Được Click
Form đăng ký quan tâm câu lạc bộ. Nút "Submit Your Interest" có viền cam 3px khi click.
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active { border: 3px solid orange; }
</style>
Click nút → viền cam xuất hiện. Thả chuột → viền biến mất.
Kết Luận
:active cho phép chọn phần tử ở trạng thái "đang được click" và áp dụng style. Thường dùng cho <a> và <button> tạo hiệu ứng phản hồi trực quan khi người dùng tương tác.
Bạn đã sẵn sàng dùng :active như chuyên gia!