Trang chủ » HTML và CSS » CSS » Bộ chon :active trong css

Bộ chon :active trong css

Bài viết này sẽ giúp các bạn hiểu hơn về bộ chọn :active trong css về cú pháp, cách sử dụng và các ví dụ thực hành

Ví dụ

– Chọn và định kiểu backgroup cho thẻ div

Code HTML:

<div class="ex_active">Ví dụ về bộ chọn active</div>

Code CSS:

div.ex_active:active {
  background-color: yellow;
}

Định nghĩa và cách sử dụng

– Bộ chọn active trong css được sử dụng để chọn và định kiểu style cho phần tử được click, được nhấp vào. Một liên kết sẽ hoạt động khi bạn nhấp vào nó.

– Mẹo: Bộ chọn có thể hoạt động được sử dụng trên tất cả các thẻ html, cả thẻ div ở ví dụ trên, không chỉ các thẻ liên kết.

– Mẹo: Sử dụng bộ chọn :link để tạo kiểu liên kết đến các trang không được chú ý, bộ chọn :visited để tạo kiểu liên kết đến các trang đã truy cập và bộ chọn :hover để liên kết kiểu khi bạn di chuột qua chúng.

– Lưu ý: Bộ chọn :active trong css phải được sử dụng sau :hover trong css thì mới có hiệu lực. Mới thực thi đúng ý muốn của bạn được.

Các ví dụ khác

Ví dụ 1: Chọn và định kiểu style cho thẻ <p>, thẻ <a> và thẻ <h1> khi nhấp vào nó

p:active, h1:active, a:active {
  background-color: red;
}

Ví dụ 2: Các bộ chọn active, visited, hover, và link trong css

/* unvisited link */
a:link {
  color: green;
}
/* visited link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: red;
}
/* selected link */
a:active {
  color: yellow;
}

Ví dụ 3: Sử dụng bộ chọn hover và active cùng kiểu style

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

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 *