Bài 26: 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;
}
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>:
div:hover {
background-color: blue;
}
Di chuyển chuột đơn giản
Di chuyển chuột vào phần tử <div> để hiển thị một phần tử <p> (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ử <p> đầu tiên phù hợp
Trong ví dụ dưới đây, bộ chọn một vài phần tử <p> là “con đầu tiên” phù hợp của vài phần tử:
p:first-child {
color: blue;
}
Phần tử <i> đầu tiên phù hợp với tất cả phần tử <p>
Trong ví dụ dưới đây, bộ chọn phần tử <i> đầu tiên phù hợp với tất cả phần tử <p>:
p i:first-child {
color: blue;
}
Tất cả phần tử <i> phù hợp với tất cả “con đầu tiên” phần tử <p>
Trong ví dụ dưới đây, bộ chọn tất cả phần tử <i> phù hợp trong phần tử <p> 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ử <q> với lang=”no”:
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Văn bản <q lang="no">Trích dẫn</q>Văn bản.</p>
</body>
</html>
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ử <input> đã kiểm tra |
| :disabled | input:disabled | Chọn mỗi phần tử <input> bị vô hiệu |
| :empty | p:empty | Chọn mỗi phần tử <p> không có con |
| :enabled | input:enabled | Chọn mỗi phần tử <input> được bật |
| :first-child | p:first-child | Chọn tất cả các phần tử <p> đó là con đầu tiên của cha mẹ nó |
| :first-of-type | p:first-of-type | Chọn mỗi phần tử <p> là phần tử <p> đầu tiên của cha / mẹ |
| :focus | input:focus | Chọn phần tử <input> 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ử <input> 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ử <input> có giá trị không hợp lệ |
| :lang(language) | p:lang(it) | Chọn mỗi phần tử <p> 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ử <p> là con cuối cùng của cha mẹ |
| :last-of-type | p:last-of-type | Chọn mỗi phần tử <p> là phần tử <p> 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ử <p> |
| :nth-child(n) | p:nth-child(2) | Chọn mỗi phần tử <p> là con thứ hai của cha mẹ |
| :nth-last-child(n) | p:nth-last-child(2) | Chọn mỗi phần tử <p> 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ử <p> là phần tử <p> 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ử <p> là phần tử <p> thứ hai của cha / mẹ |
| :only-of-type | p:only-of-type | Chọn mỗi phần tử <p> là yếu tố
duy nhất của cha mẹ nó |
| :only-child | p:only-child | Chọn mỗi phần tử <p> là con duy nhất của cha / mẹ của nó |
| :optional | input:optional | Chọn các phần tử <input> không có thuộc tính “required” |
| :out-of-range | input:out-of-range | Chọn các phần tử <input> 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ử <input> với thuộc tính “readonly” được chỉ định |
| :read-write | input:read-write | Chọn các phần tử <input> mà không có thuộc tính “readonly” |
| :required | input:required | Chọn phần tử <input> 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ử <input> với giá trị hợp lệ |
| :visited | a:visited | Chọn tất cả liên kết đã truy cập |
