:current
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Bộ chọn :current lớp giả CSS đại diện cho một phần tử hoặc phần tử tổ tiên của một phần tử đang được hiển thị hoặc làm nổi bật.
Cú pháp
:current {
/* ... */
}
:current(<compound-selector-list>) {
/* ... */
}
Mô tả
Lớp giả :current được sử dụng để đại diện cho phần tử "đang được hiển thị" trong một chuỗi các phần tử.
Điều này có thể có nghĩa là "hiện tại" theo nghĩa thời gian: :current có thể được sử dụng để nhắm mục tiêu vào phụ đề hoặc chú thích đang được hiển thị (được biểu diễn bằng WebVTT) liên kết với video đang phát.
Nó cũng có thể đề cập đến phần tử đang được làm nổi bật trong một chuỗi. Ví dụ, :current có thể được kết hợp với phần tử giả ::search-text để cung cấp các kiểu cụ thể cho kết quả tìm kiếm đang được đặt tiêu điểm từ tính năng tìm kiếm văn bản "Find in page" của trình duyệt.
Ví dụ:
p::search-text {
color: white;
background-color: purple;
}
p::search-text:current {
background-color: crimson;
}
Ví dụ
Kiểu tùy chỉnh cho kết quả tìm kiếm văn bản
Ví dụ này cho thấy cách sử dụng ::search-text và :current để tạo kiểu tùy chỉnh cho kết quả tìm kiếm "Find in page" của trình duyệt.
HTML
HTML bao gồm một đoạn văn bản cơ bản. Chúng ta sẽ không hiển thị mã nguồn HTML, vừa để ngắn gọn, vừa để dễ điều hướng qua các kết quả tìm kiếm trong ví dụ được hiển thị.
CSS
Trong CSS, chúng ta bắt đầu bằng cách tạo kiểu cho phần tử giả ::search-text. Chúng ta đặt cho nó các kiểu background-color, color, và text-shadow tùy chỉnh.
::search-text {
background-color: purple;
color: white;
text-shadow: 1px 1px 1px black;
}
Cuối cùng, chúng ta tạo kiểu cho kết quả tìm kiếm đang được đặt tiêu điểm thông qua ::search-text:current, đặt cho nó background-color khác và một số kiểu text-decoration để phân biệt với phần còn lại của kết quả.
::search-text:current {
background-color: crimson;
text-decoration-line: underline;
text-decoration-color: yellow;
text-decoration-thickness: 3px;
}
Kết quả
Ví dụ được hiển thị như sau:
Hãy thử sử dụng giao diện find in page của trình duyệt để tìm một từ xuất hiện nhiều lần trong văn bản ví dụ, chẳng hạn như "aliquam", "amet", hoặc "tortor". Di chuyển giữa kết quả trước và tiếp theo để kiểm tra kiểu :current.
Tạo kiểu cho phụ đề WebVTT đang được hiển thị
CSS
:current(p, span) {
background-color: yellow;
}
HTML
<video controls preload="metadata">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<track
label="English"
kind="subtitles"
srclang="vi"
src="subtitles.vtt"
default />
</video>
WebVTT
WEBVTT FILE 1 00:00:03.500 --> 00:00:05.000 This is the first caption 2 00:00:06.000 --> 00:00:09.000 This is the second caption 3 00:00:11.000 --> 00:00:19.000 This is the third caption