Псевдокласс CSS `:target`

:target CSS-псевдокласс выбирает целевой элемент документа. При загрузке документа целевой элемент определяется с помощью идентификатора фрагмента URL документа.

/* Selects document's target element */
:target {
  border: 2px solid black;
}

Например, в следующем URL есть идентификатор фрагмента (обозначенный символом #), который указывает элемент с id setup в качестве целевого элемента документа:

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

Следующий элемент будет выбран селектором :target, если текущий URL совпадает с указанным выше:

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

Синтаксис

:target {
  /* ... */
}

Описание

При загрузке HTML-документа браузер устанавливает его целевой элемент. Элемент определяется с помощью идентификатора фрагмента URL. Если идентификатор фрагмента URL отсутствует, у документа нет целевого элемента. Псевдокласс :target позволяет задавать стили для целевого элемента документа. Элемент можно сфокусировать, выделить, анимировать и т. д.

Целевой элемент устанавливается при загрузке документа, а также при вызовах методов history.back(), history.forward() и history.go(). Однако он не изменяется при вызовах методов history.pushState() и history.replaceState().

Примеры

Оглавление

Псевдокласс :target можно использовать, чтобы выделить часть страницы, на которую ведёт ссылка из оглавления.

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

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;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Использование псевдокласса :target в селекторах
• ::target-text (для выделения текстовых фрагментов)