Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:target

Псевдокласс CSS :target используется для применения стилей (CSS) к элементам, содержащим якорь-закладку (анкор), после перехода к ним по ссылке. Например с помощью :target можно как то по особенному выделять необходимый участок информации, чтобы дополнительно привлечь пользователя, когда он перейдет к якорю по ссылке. Причем при обычной загрузке страницы, до перехода, этого выделения не будет видно.

Раньше якоря создавались с помощью атрибута name тега <A>, но уже довольно давно в качестве них можно использовать атрибуты id абсолютно любых HTML-элементов. Именно имена этих элементов и указываются в селекторе перед псевдоклассом :target.

Ссылка на якорь создается как обычно — с помощью тега <A> и атрибута href, значение которого должно заканчиваться знаком решетка (#), после которой идет имя якоря.

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: ко всем элементам.

Значения

Нет.

Синтаксис

селектор:target {  }

Пример CSS: использование :target

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :target</title>
  <style type="text/css">
   p:target {
    border: 2px #f00 solid; /* стили рамки параграфов */
   }
  </style>
 </head>
 <body>
  <div>
   <a href="#par1">Ссылка 1</a>
   <a href="#par2">Ссылка 2</a>
   <a href="#par3">Ссылка 3</a>
  </div>
  <p id="par1">Параграф 1</p>
  <p id="par2">Параграф 2</p>
  <p id="par3">Параграф 3</p>
 </body>
</html>

Результат примера

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и выше9.29.6 и выше3.1 и выше
Поддержка:НетДаДаДаНетДаДа