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
Примеры
<!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> <a href="#p_2">Я вторая ссылка.</a> </p> </body> </html>
Пример №1