Иногда пользователям трудно заметить, что URL указывает на определённую часть документа. Узнайте, как можно использовать простое CSS-правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.

Выбор целевых элементов

Псевдокласс:target используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URLhttp://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> станет целевым элементом. Заметьте, что при прокрутке документа целевые элементы располагаются вверху окна браузера, если это возможно.

<h4>...</h4><p>...</p><div>...</div><a>...</a> <em>...</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