18/08/2018, 11:06

Cách định dạng phần tử dựa theo trạng thái của phần tử trong CSS

Thông thường, khi người dùng thực hiện một hành động nào đó tác động lên phần tử, khi đó phần tử sẽ nhận một trạng thái Ví dụ: Khi ta bấm vào phần tử, phần tử sẽ nhận trạng thái active Khi ta dí chuột vào phần tử, phần tử sẽ nhận trạng thái hover Khi ta bấm vào phần tử input, phần tử sẽ ...

Thông thường, khi người dùng thực hiện một hành động nào đó tác động lên phần tử, khi đó phần tử sẽ nhận một trạng thái

Ví dụ:

  • Khi ta bấm vào phần tử, phần tử sẽ nhận trạng thái active
  • Khi ta dí chuột vào phần tử, phần tử sẽ nhận trạng thái hover
  • Khi ta bấm vào phần tử input, phần tử sẽ nhận trạng thái focus
  • ....

Từ đây, chúng ta có thể định dạng cho phần tử khi nó đang nhận một trạng thái nào đó.

Bấm vào đây Dí chuột vào đây

Cú pháp định dạng phần tử dựa theo trạng thái của phần tử

bộ chọn:trạng thái{
    thuộc tính 1 : giá trị;
    thuộc tính 2 : giá trị;
    thuộc tính 3 : giá trị;
    .....
    thuộc tính N : giá trị;
}

Tất cả các trạng thái của phần tử

Trạng thái Ý nghĩa Ví dụ
:active Khi phần tử bị bấm vào
Ví dụ
:hover Khi phần tử bị dí chuột vào
Ví dụ
:link Khi địa chỉ trang web của liên kết chưa từng được truy cập
Ví dụ
:visited Khi địa chỉ trang web của liên kết đã từng được truy cập
Ví dụ
:checked Khi phần tử bị check
Ví dụ
:disabled Khi phần tử bị vô hiệu hóa thao tác
Ví dụ
:enabled Khi phần tử không bị vô hiệu hóa thao tác
Ví dụ
:empty Khi nội dung của phần tử là rỗng
Ví dụ
:focus Khi phần tử input bị bấm vào
Ví dụ
:in-range Khi giá trị của phần tử input nằm trong khoảng hợp lệ
Ví dụ
:out-of-range Khi giá trị của phần tử input nằm ngoài khoảng hợp lệ
Ví dụ
:valid Khi giá trị của phần tử input là hợp lệ
Ví dụ
:invalid Khi giá trị của phần tử input không hợp lệ
Ví dụ
:lang(giá trị) Khi phần tử có chứa thuộc tính lang với giá trị được chỉ định
Ví dụ
:only-child Khi phần tử là phần tử con duy nhất
Ví dụ
:only-of-type Khi phần tử là phần tử con duy nhất theo kiểu được chỉ định
Ví dụ
:first-child Khi phần tử là phần tử con đầu tiên
Ví dụ
:last-child Khi phần tử là phần tử con cuối cùng
Ví dụ
:first-of-type Khi phần tử là phần tử con đầu tiên theo kiểu được chỉ định
Ví dụ
:last-of-type Khi phần tử là phần tử con cuối cùng theo kiểu được chỉ định
Ví dụ
:nth-child(n) Khi phần tử là phần tử con thứ n
Ví dụ
:nth-last-child(n) Khi phần tử là phần tử con thứ n (thứ tự từ dưới lên)
Ví dụ
:nth-of-type(n) Khi phần tử là phần tử con thứ n theo kiểu được chỉ định
Ví dụ
:nth-last-of-type(n) Khi phần tử là phần tử con thứ n theo kiểu được chỉ định (thứ tự từ dưới lên)
Ví dụ
:not(bộ chọn) Khi phần tử không phải là phần tử giống bộ chọn
Ví dụ
:optional Khi phần tử không chứa thuộc tính required
Ví dụ
:required Khi phần tử có chứa thuộc tính required
Ví dụ
:read-only Khi phần tử chỉ có thể dùng để xem, đọc (read-only)
Ví dụ
:read-write Khi phần tử vừa có thể đọc, xem, vừa có thể viết
Ví dụ
:root Chọn phần tử gốc của trang web (phần tử gốc là <html>)
Ví dụ
:target Khi phần tử được người dùng liên kết trong đến
Ví dụ

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

0