CSS pseudo-element

Pseudo-element là gì?

Pseudo-element CSS được sử dụng để đặt樣 style cho phần tử được chỉ định.

Ví dụ, nó có thể được sử dụng để:

  • Đặt樣 style cho đầu tiên và dòng đầu tiên của phần tử
  • Chèn nội dung trước hoặc sau nội dung của phần tử

Ngữ pháp

Ngữ pháp của pseudo-element:

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

Pseudo-element ::first-line

::first-line Pseudo-element được sử dụng để thêm các樣式 đặc biệt vào dòng đầu tiên của văn bản.

Ví dụ dưới đây thêm樣式 cho dòng đầu tiên của tất cả các phần tử <p>:

Mô hình

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Thử ngay

Lưu ý:::first-line Pseudo-element chỉ có thể áp dụng cho các phần tử block.

Các thuộc tính dưới đây áp dụng cho ::first-line Pseudo-element:

  • Thuộc tính font
  • Thuộc tính màu
  • Thuộc tính nền
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Lưu ý:cách biểu diễn hai dấu chấm - ::first-line so sánh :first-line

Trong CSS3, dấu hai chấm thay thế cho cách biểu diễn một dấu chấm của pseudo-element. Đây là điều mà W3C cố gắng phân biệtPseudo-classvàPseudo-elementcủa thử nghiệm.

Trong CSS2 và CSS1, cả pseudo-class và pseudo-element đều sử dụng ngữ pháp một dấu chấm.

Để đảm bảo tương thích ngược, các pseudo-element của CSS2 và CSS1 có thể chấp nhận ngữ pháp một dấu chấm.

Pseudo-element ::first-letter

::first-letter Pseudo-element được sử dụng để thêm các樣式 đặc biệt vào đầu tiên của văn bản.

Ví dụ dưới đây thiết lập định dạng đầu tiên của văn bản cho tất cả các phần tử <p>:

Mô hình

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Thử ngay

Lưu ý:::first-letter Pseudo-element chỉ áp dụng cho các phần tử block.

Các thuộc tính dưới đây áp dụng cho pseudo-element ::first-letter:

  • Thuộc tính font
  • Thuộc tính màu
  • Thuộc tính nền
  • Thuộc tính lề ngoài
  • Thuộc tính lề trong
  • Thuộc tính viền
  • text-decoration
  • vertical-align (chỉ khi "float" là "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-element và CSS class

Pseudo-element có thể được sử dụng cùng với CSS class:

Mô hình

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Thử ngay

Ví dụ trên sẽ hiển thị đầu tiên của đoạn văn có class="intro" với màu đỏ và cỡ chữ lớn.

Nhiều pseudo-element

Cũng có thể kết hợp nhiều pseudo-element.

Trong ví dụ dưới đây, đầu tiên của đoạn văn sẽ là màu đỏ, cỡ chữ xx-large. Phần còn lại của dòng đầu tiên sẽ là màu xanh dương và sử dụng chữ in nhỏ. Phần còn lại của đoạn văn sẽ là cỡ chữ và màu mặc định:

Mô hình

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Thử ngay

CSS - pseudo-element ::before

::before Pseudo-element có thể được sử dụng để chèn một số nội dung trước nội dung của yếu tố.

Dưới đây là ví dụ để chèn một hình ảnh trước nội dung của mỗi yếu tố <h1>:

Mô hình

h1::before {
  content: url(smiley.gif);
}

Thử ngay

CSS - pseudo-element ::after

::after Pseudo-element có thể được sử dụng để chèn một số nội dung sau nội dung của yếu tố.

Dưới đây là ví dụ để chèn một hình ảnh sau nội dung của mỗi yếu tố <h1>:

Mô hình

h1::after {
  content: url(smiley.gif);
}

Thử ngay

CSS - pseudo-element ::selection

::selection pseudo-element khớp với phần元素 được người dùng chọn.

Dưới đây là các thuộc tính CSS có thể được áp dụng cho ::selection:

  • color
  • background
  • cursor
  • outline

Dưới đây là ví dụ để hiển thị văn bản được chọn trên nền vàng với màu đỏ:

Mô hình

::selection {
  color: red; 
  background: yellow;
}

Thử ngay

Tất cả các pseudo-element CSS

Chọn phần tử Ví dụ Mô tả ví dụ
::after p::after Chèn nội dung sau mỗi yếu tố <p>.
::before p::before Chèn nội dung trước mỗi yếu tố <p>.
::first-letter p::first-letter Chọn đầu tự đầu tiên của mỗi yếu tố <p>.
::first-line p::first-line Chọn dòng đầu tiên của mỗi yếu tố <p>.
::selection p::selection Chọn phần tử phần được người dùng chọn.

Tất cả các pseudo-class CSS

Chọn phần tử 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> được chọn.
:disabled input:disabled Chọn mỗi phần tử <input> bị vô hiệu hóa.
:empty p:empty Chọn mỗi phần tử <p> không có phần tử con.
:enabled input:enabled Chọn mỗi phần tử <input> đã được kích hoạt.
:first-child p:first-child Chọn mỗi phần tử <p> là con đầu tiên của phần tử cha.
:first-of-type p:first-of-type Chọn mỗi phần tử <p> là phần tử đầu tiên của phần tử cha.
:focus input:focus Chọn phần tử <input> được tập trung.
:hover a:hover Chọn liên kết bị chuột đè.
:in-range input:in-range Chọn các phần tử <input> có giá trị trong phạm vi 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> có giá trị thuộc tính lang bắt đầu bằng "it".
:last-child p:last-child Chọn mỗi phần tử <p> là con cuối cùng của phần tử cha.
:last-of-type p:last-of-type Chọn mỗi phần tử <p> là phần tử cuối cùng của phần tử cha.
:link a:link Chọn tất cả các liên kết chưa được truy cập.
:not(selector) :not(p) Chọn mỗi phần tử không phải là <p>.
:nth-child(n) p:nth-child(2) Chọn mỗi phần tử <p> là con thứ hai của phần tử cha.
:nth-last-child(n) p:nth-last-child(2) Chọn mỗi phần tử <p> là con thứ hai của phần tử cha, tính từ phần 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à con duy nhất của phần tử <p> cha, tính từ phần 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ử thứ hai của cha.
:only-of-type p:only-of-type Chọn mỗi phần tử <p> là phần tử duy nhất của cha.
:only-child p:only-child Chọn phần tử <p> là con duy nhất của cha.
:optional input:optional Chọn phần tử <input> không có thuộc tính "required".
:out-of-range input:out-of-range Chọn phần tử <input> không có giá trị trong phạm vi đã chỉ định.
:read-only input:read-only Chọn phần tử <input> đã chỉ định thuộc tính "readonly".
:read-write input:read-write Chọn phần tử <input> không có thuộc tính "readonly".
:required input:required Chọn phần tử <input> đã chỉ định thuộc tính "required".
:root root Chọn phần tử gốc của phần tử.
:target #news:target Chọn phần tử #news hiện tại hoạt động (nhấp vào URL chứa tên mối đuôi này).
:valid input:valid Chọn tất cả các phần tử <input> có giá trị hợp lệ.
:visited a:visited Chọn tất cả các liên kết đã truy cập.