Использование псевдокласса :target в селекторах

Псевдокласс псевдокласс :target используется для стилизации целевого элемента URL-адреса, содержащего идентификатор фрагмента. Например, URL https://developer.mozilla.org/en-US/docs/Web/CSS#reference содержит идентификатор фрагмента #reference. В HTML идентификаторы находятся в качестве значений атрибутов id или name, так как оба используют один и тот же пространство имён. Таким образом, пример URL-адреса указывает на заголовок «ссылка» в этом документе.

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

h2:target {
  outline: 2px solid;
}

Также можно создать стили, специфичные для определенного фрагмента документа. Это делается с использованием того же идентификатора, который находится в URI. Таким образом, чтобы добавить цвет фона фрагменту #reference, мы напишем:

#reference:target {
  background-color: yellow;
}

Если цель состоит в создании «глобального» стиля, который будет применяться ко всем целевым элементам, то универсальный селектор пригодится:

:target {
  color: red;
}

В следующем примере есть пять ссылок, которые указывают на элементы в одном документе. Выбор ссылки «Первый», например, приведет к тому, что <h1 id="one"> станет целевым элементом. Обратите внимание, что документ может переместиться в новое положение прокрутки, так как целевые элементы размещаются в верхней части окна браузера, если это возможно.

<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

В тех случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться, какую часть документа они должны читать. Стилизуя целевой элемент URI, можно уменьшить или устранить путаницу читателей.

• :target