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

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

Псевдокласс :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, такую путаницу читателей можно уменьшить или убрать вообще.

Original Document Information

  • Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
  • Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

Метки документа и участники

Внесли вклад в эту страницу: Hoopers_Hooch
Обновлялась последний раз: Hoopers_Hooch,