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

Псевдокласс :target (от англ. target – цель) позволяет выбрать все элементы требуемого типа, которые используются в качестве якорей. Стиль к ним применяется после перехода по соответствующей ссылке, например, span:target {блок объявлений}.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:target {блок объявлений}

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/selectors-3/#target-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:target

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p:target{
		color: orange;			 
		}
		
	</style>
	
</head>
<body>

	<p id="p_1">
		Мой текст становится оранжевым, когда ко мне 
		был совершен переход по первой ссылке.
	</p> 
	
	<p id="p_2">
		Мой текст становится оранжевым, когда ко мне 
		был совершен переход по второй ссылке.
	</p> 
	
	<p>	
		<a href="#p_1">Я первая ссылка.</a> &nbsp;	
		<a href="#p_2">Я вторая ссылка.</a>
	</p>
 	
</body>
</html>

Пример №1