Phần tử giả CSS
Pseudo-Elements là gì?
Phần tử giả CSS được sử dụng để tạo kiểu cho các phần cụ thể của phần tử.
Ví dụ, nó có thể được sử dụng để:
- Định kiểu chữ cái đầu tiên hoặc dòng, của một phần tử
- Chèn nội dung trước hoặc sau nội dung của một phần tử
Cú pháp
Cú pháp của phần tử giả:
selector::pseudo-element {
property: value;
}
:: Phần tử giả dòng đầu tiên
Phần ::first-linetử giả được sử dụng để thêm một kiểu đặc biệt vào dòng đầu tiên của văn bản.
Ví dụ sau định dạng dòng đầu tiên của văn bản trong tất cả các phần tử <p>:
Thí dụ
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
Lưu ý: Phần ::first-linetử giả chỉ có thể được áp dụng cho các phần tử cấp khối.
Các thuộc tính sau áp dụng cho ::first-line
phần tử giả:
- thuộc tính phông chữ
- thuộc tính màu sắc
- thuộc tính nền
- khoảng cách giữa các từ
- khoảng cách giữa các chữ cái
- trang trí văn bản
- căn chỉnh theo chiều dọc
- biến đổi văn bản
- chiều cao giữa các dòng
- thông thoáng
Lưu ý ký hiệu dấu hai chấm - ::first-line so với
:first-line
dấu hai chấm thay thế ký hiệu dấu hai chấm cho phần tử giả trong CSS3. Đây là một nỗ lực từ W3C để phân biệt giữa lớp giả
và phần tử giả .
Cú pháp dấu hai chấm được sử dụng cho cả lớp giả và phần tử giả trong CSS2 và CSS1.
Để tương thích ngược, cú pháp dấu hai chấm được chấp nhận cho các phần tử giả CSS2 và CSS1.
Phần tử giả :: chữ cái đầu tiên
Phần ::first-lettertử giả được sử dụng để thêm một kiểu đặc biệt vào chữ cái đầu tiên của văn bản.
Ví dụ sau định dạng chữ cái đầu tiên của văn bản trong tất cả các phần tử <p>:
Thí dụ
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
Lưu ý: Phần ::first-lettertử giả chỉ có thể được áp dụng cho các phần tử cấp khối.
Các thuộc tính sau áp dụng cho phần tử :: chữ cái đầu tiên giả:
- thuộc tính phông chữ
- thuộc tính màu sắc
- thuộc tính nền
- thuộc tính ký quỹ
- thuộc tính đệm
- thuộc tính biên giới
- trang trí văn bản
- vertical-align (chỉ khi "float" là "none")
- biến đổi văn bản
- chiều cao giữa các dòng
- trôi nổi
- thông thoáng
Phần tử giả và các lớp HTML
Phần tử giả có thể được kết hợp với các lớp HTML:
Thí dụ
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Ví dụ trên sẽ hiển thị chữ cái đầu tiên của đoạn văn có class = "intro", màu đỏ và có kích thước lớn hơn.
Nhiều yếu tố giả
Một số yếu tố giả cũng có thể được kết hợp.
Trong ví dụ sau, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, với kích thước phông chữ lớn xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có chữ hoa nhỏ. Phần còn lại của đoạn văn sẽ có kích thước và màu phông chữ mặc định:
Thí dụ
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}
CSS - Phần tử :: trước Pseudo-element
Phần ::beforetử giả có thể được sử dụng để chèn một số nội dung vào trước nội dung của một phần tử.
Ví dụ sau đây chèn một hình ảnh trước nội dung của mỗi phần tử <h1>:
Thí dụ
h1::before
{
content: url(smiley.gif);
}
CSS - Phần tử :: sau Pseudo-element
Phần ::aftertử giả có thể được sử dụng để chèn một số nội dung vào sau nội dung của một phần tử.
Ví dụ sau đây chèn một hình ảnh sau nội dung của mỗi phần tử <h1>:
Thí dụ
h1::after
{
content: url(smiley.gif);
}
CSS - Phần tử giả :: marker
Phần ::markertử giả chọn các điểm đánh dấu của các mục danh sách.
Ví dụ sau tạo kiểu cho các điểm đánh dấu của các mục danh sách:
Thí dụ
::marker {
color: red;
font-size: 23px;
}
CSS - Phần tử giả :: lựa chọn
Phần ::selectiontử giả khớp với phần của phần tử được người dùng chọn.
Các thuộc tính CSS sau có thể được áp dụng cho ::selection:
color,,
backgroundvà cursor.outline
Ví dụ sau làm cho văn bản đã chọn có màu đỏ trên nền vàng:
Thí dụ
::selection {
color: red;
background: yellow;
}
Tất cả các phần tử giả CSS
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Insert something after the content of each <p> element |
| ::before | p::before | Insert something before the content of each <p> element |
| ::first-letter | p::first-letter | Selects the first letter of each <p> element |
| ::first-line | p::first-line | Selects the first line of each <p> element |
| ::marker | ::marker | Selects the markers of list items |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
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 |