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ị;
}
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ụ
|
