Nội dung
- Pseudo-classes là gì?
- Cú pháp
- Anchor Pseudo-classes
- Pseudo-classes và CSS Classes
- Di chuyển chuột vào div
- Di chuyển chuột đơn giản
- CSS – The :first-child Pseudo-class
- Phần tử
đầu tiên phù hợp
- Phần tử đầu tiên phù hợp với tất cả phần tử
- Tất cả phần tử phù hợp với tất cả “con đầu tiên” phần tử
- Phần tử
- CSS – The :lang Pseudo-class
- Pseudo Classes trong CSS
Pseudo-classes là gì?
Pseudo-Class để xác định trạng thái đặc biệt của một phần tử.
Ví dụ, nó có thể sử dụng để:
- Định dạng cho một phần tử khi người dùng di chuột qua nó
- Định dạng đường dẫn khi đã và chưa được click vào
- Định dạng một phần tử khi muốn gây chú ý vào đó
Cú pháp
Cú pháp của pseudo-classes là:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Đường dẫn có thể được hiển thị nhiều cách khác nhau:
/* đường dẫn khi chưa click */
a:link {
color: #FF0000;
}
/* dường dẫn đã click */
a:visited {
color: #00FF00;
}
/* di chuyển chuột vào đường dẫn */
a:hover {
color: #FF00FF;
}
/* đường dẫn đã chọn */
a:active {
color: #0000FF;
}
Lưu ý: a:hover
phải xuất hiện sau a:link
và a:visited
trong định nghĩa của CSS để tạo ra hiệu ứng. a:active
phải xuất hiện sau a:hover
trong định nghĩa của CSS để tạo hiệu ứng. Pseudo-class không phân biệt chữ hoa chữ thường.
Pseudo-classes và CSS Classes
Pseudo-classes có thể kết hợp với CSS classes:
Khi bạn di chuyển chuột vào đường link trong ví dụ, màu sắc sẽ thay đổi:
a.highlight:hover {
color: #ff0000;
}
Di chuyển chuột vào div
Một ví dụ sử dụng pseudo-class :hover
trong phần tử
div:hover {
background-color: blue;
}
Di chuyển chuột đơn giản
Di chuyển chuột vào phần tử
[như để giải thích cho một điều gì đó]
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS – The :first-child Pseudo-class
Pseudo-class :first-child
kết nối một phần tử đặc biệt là “con đầu tiên” của phần tử khác.
Phần tử đầu tiên phù hợp
Trong ví dụ dưới đây, bộ chọn một vài phần tử
là “con đầu tiên” phù hợp của vài phần tử:
p:first-child {
color: blue;
}
Phần tử đầu tiên phù hợp với tất cả phần tử
Trong ví dụ dưới đây, bộ chọn phần tử đầu tiên phù hợp với tất cả phần tử
:
p i:first-child {
color: blue;
}
Tất cả phần tử phù hợp với tất cả “con đầu tiên” phần tử
Trong ví dụ dưới đây, bộ chọn tất cả phần tử phù hợp trong phần tử
là “con đầu tiên” của phần tử khác:
p:first-child i {
color: blue;
}
CSS – The :lang Pseudo-class
Pseudo-class :lang
cho phép bạn định nghĩa một quy tắc đặc biệt cho các ngôn ngữ khác.
Ví dụ bên dưới, :lang
định xác định dấu nhắc cho phần tử với lang=”no”:
q:lang[no] {
quotes: "~" "~";
}
Văn bản Trích dẫnVăn bản.
Pseudo Classes trong CSS
Selector | Ví dụ | Mô tả ví dụ |
:active | a:active | Chọn liên kết đang hoạt động |
:checked | input:checked | Chọn mỗi phần tử đã kiểm tra |
:disabled | input:disabled | Chọn mỗi phần tử bị vô hiệu |
:empty | p:empty | Chọn mỗi phần tử không có con |
:enabled | input:enabled | Chọn mỗi phần tử được bật |
:first-child | p:first-child | Chọn tất cả các phần tử đó là con đầu tiên của cha mẹ nó |
:first-of-type | p:first-of-type | Chọn mỗi phần tử là phần tử đầu tiên của cha / mẹ |
:focus | input:focus | Chọn phần tử cần nhấn mạnh |
:hover | a:hover | Chọn liên kết khi di chuyển chuột qua |
:in-range | input:in-range | Chọn phần tử với một giá trị trong phạm vi được chỉ định |
:invalid | input:invalid | Chọn tất cả các phần tử có giá trị không hợp lệ |
:lang[language] | p:lang[it] | Chọn mỗi phần tử với một giá trị thuộc tính lang bắt đầu với “it” |
:last-child | p:last-child | Chọn mỗi phần tử là con cuối cùng của cha mẹ |
:last-of-type | p:last-of-type | Chọn mỗi phần tử là phần tử cuối cùng của cha mẹ |
:link | a:link | Chọn tất cả các liên kết chưa được click |
:not[selector] | :not[p] | Chọn mọi phần tử không phải là một phần tử
|
:nth-child[n] | p:nth-child[2] | Chọn mỗi phần tử là con thứ hai của cha mẹ |
:nth-last-child[n] | p:nth-last-child[2] | Chọn mỗi phần tử là con thứ hai của cha / mẹ nó, kể từ con cuối cùng |
:nth-last-of-type[n] | p:nth-last-of-type[2] | Chọn mỗi phần tử là phần tử thứ hai của cha / mẹ nó, tính từ con cuối cùng |
:nth-of-type[n] | p:nth-of-type[2] | Chọn mỗi phần tử là phần tử thứ hai của cha / mẹ |
:only-of-type | p:only-of-type | Chọn mỗi phần tử là yếu tố duy nhất của cha mẹ nó |
:only-child | p:only-child | Chọn mỗi phần tử là con duy nhất của cha / mẹ của nó |
:optional | input:optional | Chọn các phần tử không có thuộc tính “required” |
:out-of-range | input:out-of-range | Chọn các phần tử với một giá trị bên ngoài phạm vi được chỉ định |
:read-only | input:read-only | Chọn các phần tử với thuộc tính “readonly” được chỉ định |
:read-write | input:read-write | Chọn các phần tử mà không có thuộc tính “readonly” |
:required | input:required | Chọn phần tử với thuộc tính “required” được chỉ định |
:root | root | Chọn phần tử gốc của tài liệu |
:target | #news:target | Chọn phần tử #news đang hoạt động hiện tại [nhấp vào URL có chứa tên anchor đó] |
:valid | input:valid | Chọn tất cả các phần tử với giá trị hợp lệ |
:visited | a:visited | Chọn tất cả liên kết đã truy cập |