Использование псевдокласса :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, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:

css
h2:target {
  font-weight: bold;
}

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

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

Отметка всех элементов, как целевых

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

css
:target {
  color: red;
}

Пример

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что <h1 id="one"> станет целевым элементом. Заметьте, что при прокрутке документа целевые элементы располагаются вверху окна браузера, если это возможно.

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

Смотрите также