: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 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Нет | Нет | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | До 9.0 | 9.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 | 9.6 и выше | 3.1 и выше |
| Поддержка: | Нет | Да | Да | Да | Нет | Да | Да |