:target
Срабатывает у элемента, чей `id` совпадает с фрагментом адреса после `#`.
Синтаксис
selector:target { … }Примеры
Щёлкните по ссылке — раздел, на который она ведёт, подсветится:
<style>
section { padding: 8px; }
section:target { background: lightyellow; outline: 2px solid gold; }
</style>
<p><a href="#faq">Go to FAQ</a></p>
<section id="faq">FAQ: shipping costs $5.</section>Примечания
:target удобен, чтобы подсветить раздел, к которому читатель перешёл из оглавления. Он меняется вместе с адресом, поэтому кнопка «Назад» в браузере тоже его переключает.
См. также
- #id — Выбирает единственный элемент с указанным атрибутом `id`.
- scroll-margin — Дополнительное место вокруг элемента, когда страница прокручивается к нему, — чтобы он не оказался под фиксированной шапкой.
Вопросы и ответы по теме
В учебнике
- Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.