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

Псевдокласс :target используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example содержит идентификатор фрагмента #example. В HTML, идентификаторы определяются значениями атрибутов id или name, т.к. эти атрибуты разделяют одно пространство имён. Таким образом, в вышеприведённом примере URL указывает на первый элемент "example" в документе.

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

h2:target {
  font-weight: bold;
}

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

#example:target {
  border: 1px solid black;
}

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

:target {
  color: red;
}

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что <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