Pseudo-elements

Cú pháp

css

selector::pseudo-element {
  property: value;
}

Ví dụ: ::first-line có thể được dùng để thay đổi font của dòng đầu tiên của một đoạn văn.

css

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Dấu hai chấm kép (::) được dùng cho pseudo-element. Điều này phân biệt pseudo-element với pseudo-class sử dụng một dấu hai chấm (:) trong ký hiệu của chúng. Lưu ý, các trình duyệt hỗ trợ cú pháp dấu hai chấm đơn cho bốn pseudo-element gốc: ::before, ::after, ::first-line, và ::first-letter.

Pseudo-element không tồn tại độc lập. Phần tử mà pseudo-element là một phần của nó được gọi là phần tử gốc. Pseudo-element phải xuất hiện sau tất cả các thành phần khác trong bộ chọn phức tạp hoặc kết hợp. Phần tử cuối cùng trong bộ chọn là phần tử gốc của pseudo-element. Ví dụ: bạn có thể chọn dòng đầu tiên của đoạn văn bằng p::first-line nhưng không thể chọn các con của dòng đầu tiên. Vì vậy p::first-line > * là không hợp lệ.

Pseudo-element có thể được chọn dựa trên trạng thái hiện tại của phần tử gốc. Ví dụ: p:hover::first-line chọn dòng đầu tiên (pseudo-element) của đoạn văn khi bản thân đoạn văn đang được di chuột qua (pseudo-class).

Note: Khi danh sách bộ chọn chứa bộ chọn không hợp lệ, toàn bộ khối kiểu bị bỏ qua.

Pseudo-element chữ

::first-line: Hộp dòng đầu tiên của phần tử gốc.
::first-letter: Chữ cái, số hoặc ký tự biểu tượng đầu tiên trên dòng đầu tiên của phần tử gốc.
::cue: Các cue WebVTT trong phần tử được chọn. Cái này có thể được dùng để tạo kiểu cho phụ đề và các cue khác trong phương tiện có track VTT. Module CSS pseudo-elements cũng định nghĩa các sub-pseudo element ::postfix và ::prefix. Chúng chưa được bất kỳ trình duyệt nào hỗ trợ.

Pseudo-element làm nổi bật

Chọn các phần tài liệu dựa trên nội dung và trạng thái tài liệu, cho phép các vùng đó được tạo kiểu khác nhau để chỉ ra trạng thái đó cho người dùng.

::grammar-error: Một phần văn bản mà trình duyệt cho là sai ngữ pháp.
::highlight(): Các phần tử trong highlight registry. Được dùng để tạo các highlight tùy chỉnh.
::search-text: Kết quả tìm kiếm được xác định bởi tính năng tìm kiếm văn bản "Find" hoặc "Find in page" của tác nhân người dùng.
::selection: Phần tài liệu đã được chọn.
::spelling-error: Một phần văn bản mà trình duyệt cho là sai chính tả.
::target-text: Phần tử đích của tài liệu. Phần tử đích được xác định bằng fragment của URL.

Pseudo-element tuân theo cây

Các pseudo-element này hoạt động như các phần tử thông thường, phù hợp liền mạch trong mô hình hộp. Chúng hoạt động như một phần tử con có thể được tạo kiểu trực tiếp trong hệ thống phân cấp phần tử gốc.

::before: Tạo ra một pseudo-element là con đầu tiên của phần tử được chọn.
::after: Tạo ra một pseudo-element là con cuối cùng của phần tử được chọn.
::column: Mỗi mảnh cột của bố cục nhiều cột.
::marker: Hộp marker được tạo tự động của mục danh sách.
::backdrop: Phông nền của phần tử gốc được hiển thị trong lớp trên cùng.
::scroll-button(): Tạo ra một nút có thể điều khiển việc cuộn của scroll container mà nó được áp dụng.
::scroll-marker: Tạo ra một pseudo-element là scroll marker — một nút đích cuộn cho phần tử gốc của nó được lồng trong một scroll-marker group.
::scroll-marker-group: Tạo ra một container trước hoặc sau scroll container để chứa các pseudo-element ::scroll-marker được tạo ra trên phần tử hoặc các phần tử con của nó.

Pseudo-element được hỗ trợ bởi phần tử

Các pseudo-element này là các phần tử thực không thể chọn theo cách khác.

::details-content: Nội dung có thể mở rộng/thu gọn của phần tử <details>.
::part(): Bất kỳ phần tử nào trong cây shadow có thuộc tính part khớp.
::slotted(): Bất kỳ phần tử nào được đặt vào một slot bên trong template HTML.

Pseudo-element liên quan đến biểu mẫu

Các pseudo-element này liên quan đến các điều khiển biểu mẫu.

::checkmark: Nhắm đến dấu kiểm được đặt bên trong phần tử <option> hiện đang được chọn của phần tử select tùy chỉnh để cung cấp chỉ báo trực quan về phần tử nào đang được chọn.
::file-selector-button: Nút của <input> với type="file".
::picker(): Phần picker của một phần tử, ví dụ picker thả xuống của phần tử select tùy chỉnh.
::picker-icon: Biểu tượng picker bên trong các điều khiển biểu mẫu có biểu tượng liên quan. Trong trường hợp phần tử select tùy chỉnh, nó chọn mũi tên chỉ xuống khi select bị đóng.
::placeholder: Văn bản placeholder trong trường nhập liệu.

Chỉ mục theo bảng chữ cái

Pseudo-element được định nghĩa bởi một tập hợp các thông số kỹ thuật CSS bao gồm các mục sau:

A

::after

B

C

D

::details-content

F

G

::grammar-error

H

::highlight()

M

::marker

P

S

T

::target-text

V

Pseudo-element không chuẩn

Các pseudo-element không chuẩn có tiền tố vendor bao gồm:

Tiền tố `-moz-`

Tiền tố `-webkit-`

Lồng nhau pseudo-element

Bạn có thể kết hợp một số bộ chọn pseudo-element lại với nhau để tạo kiểu cho pseudo-element lồng bên trong các pseudo-element khác. Các tổ hợp pseudo-element lồng nhau sau được hỗ trợ:

::after
- ::after::marker: Chọn pseudo-element ::marker của pseudo-element ::after, khi ::after được tạo kiểu như một mục danh sách, với display: list-item.
::before
- ::before::marker: Chọn pseudo-element ::marker của pseudo-element ::before, khi ::before được tạo kiểu như một mục danh sách, với display: list-item.

Hãy xem các trang tham chiếu pseudo-element riêng lẻ để biết ví dụ và thông tin tương thích trình duyệt.

Kế thừa của pseudo-element làm nổi bật

Pseudo-element làm nổi bật, chẳng hạn như ::selection, ::target-text, ::highlight(), ::spelling-error, và ::grammar-error, tuân theo mô hình kế thừa nhất quán khác với kế thừa phần tử thông thường.

Khi bạn áp dụng kiểu cho pseudo-element làm nổi bật, chúng kế thừa từ cả hai:

Các phần tử cha của chúng (theo kế thừa thông thường).
Các pseudo-element làm nổi bật của phần tử cha (theo kế thừa highlight).

Điều này có nghĩa là nếu bạn tạo kiểu cho cả pseudo-element làm nổi bật của phần tử cha và pseudo-element làm nổi bật của phần tử con, văn bản được làm nổi bật của con sẽ kết hợp các thuộc tính từ cả hai nguồn.

Dưới đây là một ví dụ cụ thể.

Đầu tiên, chúng ta có HTML bao gồm hai phần tử <div> lồng nhau. Một phần nội dung văn bản được bao gồm trực tiếp bên trong <div> cha, và một phần được lồng bên trong <div> con.

html

<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>

Tiếp theo, chúng ta thêm CSS chọn các phần tử <div> cha và con riêng biệt và cho chúng các giá trị color khác nhau, đồng thời chọn văn bản được chọn của cha và con (::selection). Điều này cho mỗi <div> một background-color khác nhau và đặt color văn bản khác nhau trên lựa chọn của cha.

css

/* Style for the parent element */
.parent {
  color: blue;
}

/* Style for the parent's selected text */
.parent::selection {
  background-color: yellow;
  color: red;
}

/* Style for the child element */
.child {
  color: green;
}

/* Style for the child's selected text */
.child::selection {
  background-color: orange;
}

Ví dụ hiển thị như sau:

Hãy thử chọn văn bản trong cả phần tử cha và phần tử con. Chú ý rằng:

Khi bạn chọn văn bản cha, nó sử dụng nền vàng và màu văn bản đỏ được định nghĩa trong .parent::selection.
Khi bạn chọn văn bản con, nó sử dụng:
- Nền cam từ .child::selection.
- Màu văn bản đỏ được kế thừa từ pseudo-element ::selection của cha.

Điều này minh họa cách pseudo-element làm nổi bật của con kế thừa từ cả phần tử cha và pseudo-element làm nổi bật của cha.

Thuộc tính tùy chỉnh CSS (biến) trong pseudo-element làm nổi bật kế thừa từ phần tử gốc của chúng (phần tử chúng đang được áp dụng), không qua chuỗi kế thừa highlight. Ví dụ:

css

:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

Khi sử dụng bộ chọn phổ quát với pseudo-element làm nổi bật, nó ngăn kế thừa highlight. Ví dụ:

css

/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

/* Prefer this to allow inheritance */
:root::selection {
  color: lightgreen;
}