:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:target là lớp giả CSS chọn phần tử mục tiêu của tài liệu. Khi tài liệu được tải, phần tử mục tiêu được xác định bằng định danh đoạn URL của tài liệu.

css

/* Chọn phần tử mục tiêu của tài liệu */
:target {
  border: 2px solid black;
}

Ví dụ: URL sau có một định danh đoạn (được biểu thị bằng ký hiệu #) đánh dấu phần tử có id là setup làm phần tử mục tiêu của tài liệu:

url

http://www.example.com/help/#setup

Phần tử sau sẽ được chọn bởi bộ chọn :target khi URL hiện tại bằng URL trên:

html

<section id="setup">Installation instructions</section>

Cú pháp

css

:target {
  /* ... */
}

Khi một tài liệu HTML được tải, trình duyệt sẽ đặt phần tử mục tiêu của nó. Phần tử được xác định bằng định danh đoạn URL. Nếu không có định danh đoạn URL, tài liệu sẽ không có phần tử mục tiêu. Lớp giả :target cho phép tạo kiểu cho phần tử mục tiêu của tài liệu. Phần tử có thể được focus, tô sáng, tạo hiệu ứng hoạt hình, v.v.

Phần tử mục tiêu được đặt khi tải tài liệu và khi gọi các phương thức history.back(), history.forward(), và history.go(). Nhưng nó không thay đổi khi các phương thức history.pushState() và history.replaceState() được gọi.

Note: Do một lỗi có thể có trong đặc tả CSS, :target không hoạt động bên trong web component vì shadow root không truyền phần tử mục tiêu xuống shadow tree.

Ví dụ

Mục lục

Lớp giả :target có thể được dùng để tô sáng phần của trang đã được liên kết từ mục lục.

HTML

html

<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere">
      This link goes nowhere, because the target doesn't exist.
    </a>
  </li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the first
  link above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the second link above.
  Isn't that delightful?
</p>

CSS

css

p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}