Pseudo-class :active trong CSS

Pseudo-class (lớp giả) dùng để hiển thị trạng thái khác nhau của phần tử hoặc bộ chọn CSS. Pseudo-class :active hiển thị khi phần tử đang ở trạng thái active (đang được kích hoạt).

Lớp giả này thường liên kết với link, button hoặc bất kỳ phần tử nào có thể active.

Ví dụ: nếu liên kết với thẻ <a>, tức là link đang được nhấn.

Cú pháp

a:active { color:green; }

Hãy kiểm tra cách sử dụng thực tế của :active pseudo-class với các kịch bản sau:

Ví dụ 1

<html> <head>    <style>       a:active { color:green; }    </style> </head> <body>    <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>

Giải thích

Khi bạn lần đầu thấy link, nó hiển thị màu link mặc định (xanh dương) và sẽ chuyển sang xanh lá khi link đang được nhấn (active).

Ví dụ 2

<html> <head>    <style>       a:active { font-size:20px; }    </style> </head> <body>    <a href="https://www.tutorialspoint.com">Click here to learn</a> </body> </html>

Giải thích

Cái này sẽ thay đổi cỡ chữ link thành 20px trong lúc bạn nhấn vào link.

Ví dụ 3

<html> <head>    <style>       body:active {          background: seagreen;       }       </style> </head> <body> <div>click anywhere in this window</div> </body> </html>

Giải thích

Khi bạn nhấn chuột bất kỳ đâu trên màn hình, màu nền sẽ chuyển sang seagreen.

Ví dụ 4

<html> <head>    <style>       #thisButton:active { color: red }    </style> </head> <body>    <button id="thisButton">Click Me!!</button> </body> </html>

Giải thích

Màu chữ của nút sẽ chuyển sang đỏ trong lúc bạn nhấn nút.

Tương thích trình duyệt