Yếu tố giả

The CSS Podcast – 014: Phần tử giả

Nếu bạn có một bài viết nội dung và muốn chữ cái đầu tiên là chữ cái đầu dòng lớn hơn nhiều, bạn sẽ làm như thế nào?

Một vài đoạn văn bản có chữ cái đầu tiên được viết hoa màu xanh dương

Trong CSS, bạn có thể sử dụng phần tử giả ::first-letter để đạt được loại chi tiết thiết kế này.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Phần tử giả lập giống như việc thêm hoặc nhắm mục tiêu một phần tử bổ sung mà không cần thêm HTML. Giải pháp mẫu này, sử dụng ::first-letter, là một trong nhiều phần tử giả. Các phần tử giả có nhiều vai trò và trong bài học này, bạn sẽ tìm hiểu những phần tử giả nào có sẵn và cách sử dụng các phần tử giả đó.

::before và ::after

Cả phần tử giả ::before và ::after đều tạo một phần tử con bên trong một phần tử chỉ nếu bạn xác định thuộc tính content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content có thể là bất kỳ chuỗi nào, kể cả chuỗi trống, nhưng hãy lưu ý rằng mọi nội dung khác ngoài chuỗi trống đều có thể được trình đọc màn hình thông báo. Bạn có thể thêm một hình ảnh url, để chèn hình ảnh ở kích thước ban đầu, vì vậy, bạn sẽ không thể đổi kích thước hình ảnh đó. Bạn cũng có thể chèn một counter.

Sau khi tạo một phần tử ::before hoặc ::after, bạn có thể tạo kiểu cho phần tử đó theo bất kỳ cách nào mà bạn muốn mà không có giới hạn nào. Bạn chỉ có thể chèn phần tử ::before hoặc ::after vào một phần tử sẽ chấp nhận các phần tử con (các phần tử có cây tài liệu), vì vậy, các phần tử như <img />, <video> và <input> sẽ không hoạt động.

::first-letter

Chúng ta đã gặp phần tử giả lập này ở đầu bài học. Xin lưu ý rằng không phải thuộc tính CSS nào cũng có thể dùng được khi nhắm mục tiêu đến ::first-letter. Các thuộc tính có sẵn là:

  • color
  • Thuộc tính background (chẳng hạn như background-image)
  • Thuộc tính border (chẳng hạn như border-color)
  • float
  • Thuộc tính font (chẳng hạn như font-size và font-weight)
  • thuộc tính văn bản (chẳng hạn như text-decoration và word-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Phần tử giả ::first-line sẽ cho phép bạn định kiểu dòng văn bản đầu tiên chỉ khi phần tử được áp dụng ::first-line có giá trị display là block, inline-block, list-item, table-caption hoặc table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Giống như phần tử giả ::first-letter, bạn chỉ có thể sử dụng một tập hợp con các thuộc tính CSS:

  • color
  • background cơ sở lưu trú
  • font cơ sở lưu trú
  • text cơ sở lưu trú

::backdrop

Nếu có một phần tử hiển thị ở chế độ toàn màn hình, chẳng hạn như <dialog> hoặc <video>, bạn có thể tạo kiểu cho phông nền (không gian giữa phần tử và phần còn lại của trang) bằng phần tử giả ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

Phần tử giả ::marker cho phép bạn tạo kiểu cho dấu đầu dòng hoặc số cho một mục danh sách hoặc mũi tên của phần tử <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Chỉ một số ít thuộc tính CSS được hỗ trợ cho ::marker:

  • color
  • content
  • white-space
  • font cơ sở lưu trú
  • Các thuộc tính animation và transition

Bạn có thể thay đổi biểu tượng điểm đánh dấu bằng cách sử dụng thuộc tính content. Bạn có thể sử dụng thuộc tính này để đặt biểu tượng dấu cộng và dấu trừ cho trạng thái đóng và trống của phần tử <summary>, chẳng hạn.

::selection

Phần tử giả lập ::selection cho phép bạn tạo kiểu cho văn bản đã chọn.

::selection {
  background: green;
  color: white;
}

Bạn có thể sử dụng phần tử giả này để tạo kiểu cho tất cả văn bản đã chọn như trong bản minh hoạ ở trên. Bạn cũng có thể kết hợp bộ chọn này với các bộ chọn khác để có kiểu lựa chọn cụ thể hơn.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Giống như các phần tử giả lập khác, chỉ một số thuộc tính CSS được phép:

  • color
  • background-color nhưng không phải background-image
  • text cơ sở lưu trú

::placeholder

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 10.1.

Source

Bạn có thể thêm gợi ý trợ giúp để tạo các phần tử, chẳng hạn như <input> có thuộc tính placeholder. Phần tử giả ::placeholder cho phép bạn tạo kiểu cho văn bản đó.

input::placeholder {
  color: darkcyan;
}

::placeholder chỉ hỗ trợ một tập con quy tắc CSS:

  • color
  • background cơ sở lưu trú
  • font cơ sở lưu trú
  • text cơ sở lưu trú

::cue

Browser Support

  • Chrome: 26.
  • Edge: 79.
  • Firefox: 55.
  • Safari: 7.

Source

Cuối cùng trong phần tìm hiểu về phần tử giả này là phần tử giả ::cue. Điều này cho phép bạn tạo kiểu cho các tín hiệu WebVTT, đó là phụ đề của phần tử <video>.

Bạn cũng có thể truyền một bộ chọn vào ::cue, cho phép bạn tạo kiểu cho các phần tử cụ thể bên trong chú thích.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về phần tử giả

Mục nào sau đây không phải là phần tử giả?

::before
Đừng quên thêm content: '';.
::first-paragraph
Thuộc tính này không tồn tại trong CSS.
::after
Đừng quên thêm content: '';.
::marker
Đây là phần tử dấu đầu dòng khi bạn sử dụng phần tử danh sách hoặc loại hiển thị.
::pencil
Thuộc tính này không tồn tại trong CSS.
:active
Đây là lớp giả chứ không phải phần tử giả.

Bạn có thể tìm thấy phần tử giả trong tệp HTML.

Đúng
Mặc dù Công cụ cho nhà phát triển có thể hiển thị các phần tử giả trong bảng điều khiển Phần tử, nhưng bạn sẽ không tìm thấy các phần tử giả trong HTML. Các phần tử giả thuộc sở hữu của trình duyệt.
Sai
Bạn có thể nhắm mục tiêu đến các lớp này bằng CSS nhưng sẽ không tìm thấy các lớp này trong HTML.