Категория > Справочник CSS > Псевдокласс - :target

Псевдокласс - :target


23-03-2016, 18:25. Автор: Administrator
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 1.0+ 3.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/css3-selectors/#target-pseudo

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис

элемент:target { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>target</title>
  <style>
   h2:target {
    background: #fc0; /* Цвет фона */
    padding: 3px; 
   }
  </style>
 </head>
 <body>
  <ul>
    <li><a href="#h1">История 1</a></li>
    <li><a href="#h2">История 2</a></li>
  </ul>
  <h2 id="h1">История 1</h2>
   <p>История о том, как необходимо было сделать могилу, 
   ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <h2 id="h2">История 2</h2>
   <p>История о том, как возле столовой появились загадочные розовые
   следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

В данном примере целевой элемент выделяется цветом фона.

Браузеры

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Перейти обратно к новости