Lớp giả CSS
Pseudo-class là gì?
Một lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử.
Ví dụ, nó có thể được sử dụng để:
- Tạo kiểu cho một phần tử khi người dùng di chuột qua nó
- Phong cách các liên kết được truy cập và không được truy cập khác nhau
- Tạo kiểu cho một phần tử khi nó được lấy nét
Di chuột qua tôi
Cú pháp
Cú pháp của lớp giả:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-class
Các liên kết có thể được hiển thị theo nhiều cách khác nhau:
Thí dụ
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Lưu ý: a:hover PHẢI đứng sau a:linkvà
a:visitedtrong định nghĩa CSS để có hiệu quả! a:activePHẢI đứng sau
a:hoverđịnh nghĩa CSS để có hiệu quả! Tên lớp giả không phân biệt chữ hoa chữ thường.
Lớp giả và lớp HTML
Các lớp giả có thể được kết hợp với các lớp HTML:
Khi bạn di chuột qua liên kết trong ví dụ, nó sẽ đổi màu:
Thí dụ
a.highlight:hover {
color: #ff0000;
}
Di chuột trên <div>
Ví dụ về việc sử dụng lớp :hovergiả trên phần tử <div>:
Thí dụ
div:hover {
background-color: blue;
}
Di chuột chú giải công cụ đơn giản
Di chuột qua phần tử <div> để hiển thị phần tử <p> (như chú giải công cụ):
Tada! Here I am!
Thí dụ
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS - The: first-child Pseudo-class
Lớp :first-childgiả khớp với một phần tử được chỉ định là phần tử con đầu tiên của phần tử khác.
Khớp với phần tử <p> đầu tiên
Trong ví dụ sau, bộ chọn khớp với bất kỳ phần tử <p> nào là phần tử con đầu tiên của bất kỳ phần tử nào:
Thí dụ
p:first-child
{
color: blue;
}
Khớp phần tử <i> đầu tiên trong tất cả các phần tử <p>
Trong ví dụ sau, bộ chọn khớp với phần tử <i> đầu tiên trong tất cả các phần tử <p>:
Thí dụ
p i:first-child
{
color: blue;
}
Khớp tất cả các phần tử <i> trong tất cả các phần tử <p> con đầu tiên
Trong ví dụ sau, bộ chọn khớp với tất cả các phần tử <i> trong phần tử <p> là phần tử con đầu tiên của một phần tử khác:
Thí dụ
p:first-child i
{
color: blue;
}
CSS - The: lang Pseudo-class
Lớp :langgiả cho phép bạn xác định các quy tắc đặc biệt cho các ngôn ngữ khác nhau.
Trong ví dụ dưới đây, :langxác định dấu ngoặc kép cho các phần tử <q> với lang = "no":
Thí dụ
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Các ví dụ khác
Ví dụ này trình bày cách thêm các kiểu khác vào siêu kết nối.
Ví dụ này trình bày cách sử dụng: focus pseudo-class.
Tất cả các lớp giả CSS
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
| :read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
| :required | input:required | Selects <input> elements with a "required" attribute specified |
| :root | root | Selects the document's root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Selects all visited links |
Tất cả các phần tử giả CSS
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Insert content after every <p> element |
| ::before | p::before | Insert content before every <p> element |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |