CSS псевдо-класс :target

Поддержка браузерами


12.0+	9.0+	3.5+	4.0+	9.6+	3.2+

Описание

Псевдо-класс :target выбирает текущий целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы.

Синтаксис

:target { свойства }

Пример:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
  <style>
    .tab div { display: none; }
    .tab div:target { display: block; }
  </style>
</head>
<body>

  <div class="tab">
    <a href="#link1">Ссылка 1</a>
    <a href="#link2">Ссылка 2</a>
    <a href="#link3">Ссылка 3</a>

    <div id="link1">
      <h3>Содержимое по ссылке 1</h3>
      <p>Hello World!</p>
    </div>

    <div id="link2">
      <h3>Содержимое по ссылке 2</h3>
      <p>Привет Мир!!</p>
    </div>

    <div id="link3">
      <h3>Содержимое по ссылке 3</h3>
      <p>Ещё увидимся!</p>
    </div>
  </div>

</body>
</html>

Результат данного примера:

Ссылка 1 Ссылка 2 Ссылка 3

Содержимое по ссылке 1

Hello World!

Содержимое по ссылке 2

Привет Мир!!

Содержимое по ссылке 3

Ещё увидимся!