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

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

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ẽ 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 đó.

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

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

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi