Yếu tố giả

Podcast CSS – 014: Các yếu tố giả

Nếu bạn có một bài viết về nội dung và bạn muốn chữ cái đầu tiên phải là giới hạn lớn hơn nhiều — bạn sẽ làm được điều đó bằng cách nào?

Một vài đoạn văn bản có hình mũ thả màu xanh dương

Trong CSS, bạn có thể sử dụng phần tử giả ::first-letter để có được kiểu thiết kế chi tiết 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ả 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 phải thêm HTML khác. Giải pháp mẫu này (sử dụng ::first-letter) là một trong nhiều phần tử giả. Chúng có nhiều vai trò và trong bài học này, bạn sẽ tìm hiểu về những phần tử giả có sẵn cũng như cách sử dụng chúng.

::before và ::after

Cả hai phần tử giả ::before và ::after đều tạo 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à chuỗi bất kỳ (kể cả chuỗi trống), nhưng hãy lưu ý rằng trình đọc màn hình có thể thông báo bất kỳ nội dung nào khác ngoài chuỗi trống. Bạn có thể thêm hình ảnh url. Thao tác này sẽ chèn hình ảnh ở kích thước ban đầu để bạn 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 phần tử ::before hoặc ::after, bạn có thể tạo kiểu theo ý muốn mà không có giới hạn. Bạn chỉ có thể chèn phần tử ::before hoặc ::after vào một phần tử chấp nhận các phần tử con (các phần tử có cây tài liệu), do đó, 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ả 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 khi nhắm mục tiêu ::first-letter. Các cơ sở lưu trú hiện có 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
  • Các thuộc tính font (chẳng hạn như font-size và font-weight)
  • các 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ẽ chỉ cho phép bạn tạo kiểu cho dòng văn bản đầu tiên nếu 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ể dùng một nhóm nhỏ thuộc tính CSS:

  • color
  • background tài sản
  • font tài sản
  • text tài sản

::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 (khoảng 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 trong 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 tài sản CSS được hỗ trợ cho ::marker:

  • color
  • content
  • white-space
  • font tài sản
  • Các thuộc tính animation và transition

Bạn có thể thay đổi ký hiệu đánh dấu bằng cách sử dụng thuộc tính content. Ví dụ: bạn có thể sử dụng tính năng này để đặt ký hiệu dấu cộng và dấu trừ cho trạng thái đóng và trống của phần tử <summary>.

::selection

Phần tử giả ::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ể sử dụng kết hợp 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ả khác, chỉ cho phép một nhóm nhỏ thuộc tính CSS:

  • color
  • background-color nhưng không phải background-image
  • text tài sản

::placeholder

Hỗ trợ trình duyệt

  • 57
  • 79
  • 51
  • 10.1

Nguồn

Bạn có thể thêm gợi ý trợ giúp để tạo các thành phần biểu mẫu, 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 số quy tắc CSS:

  • color
  • background tài sản
  • font tài sản
  • text tài sản

::cue

Hỗ trợ trình duyệt

  • 26
  • 79
  • 55
  • 7

Nguồn

Cuối cùng trong chuyến tham quan về phần tử giả này, hãy cùng tìm hiểu về phần tử giả ::cue. Nhờ vậy, bạn có thể tạo kiểu cho các tín hiệu WebVTT, là chú thích của phần tử <video>.

Bạn cũng có thể chuyển 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 kiến thức

Kiểm tra kiến thức về các phần tử giả

Yếu tố nào sau đây không phải là phần tử giả?

::before
Đừng quên thêm content: '';.
::first-paragraph
Tính năng 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 kiểu hiển thị.
::pencil
Tính năng này không tồn tại trong CSS.
:active
Đây là lớp giả chứ không phải là 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 sẽ không tìm thấy các phần tử giả trong HTML, nhưng các phần tử này thuộc sở hữu của trình duyệt.
Sai
CSS có thể nhắm mục tiêu các URL này nhưng không tìm thấy trong HTML.