Стиль целевого элемента
Описание
Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.
Синтаксис
Селектор:target { ... }Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.h:target {
background: rgba(255, 128, 0, 0.873);
padding: 7px;
}
</style>
<ul>
<li><a href='#h1'>История 1</a></li>
<li><a href='#h2'>История 2</a></li>
</ul>
<h2 class='h' id='h1'>История 1</h2>
<p>
Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты. Правилами рукопись эта над напоивший моей за переписывается рекламных до злых что одна образ, букв диких вопроса продолжил возвращайся инициал языкового от всех!
</p>
<h2 class='h' id='h2'>История 2</h2>
<p>
Переулка если, моей вопроса дорогу, строчка продолжил буквоград языкового злых то алфавит рыбными повстречался раз рекламных ipsum! Коварных?
</p>
</body>
</html>История 1
Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты. Правилами рукопись эта над напоивший моей за переписывается рекламных до злых что одна образ, букв диких вопроса продолжил возвращайся инициал языкового от всех!
История 2
Переулка если, моей вопроса дорогу, строчка продолжил буквоград языкового злых то алфавит рыбными повстречался раз рекламных ipsum! Коварных?
Читайте также
Свойство grid
Свойство grid является сокращенной формой записи, которая устанавливает значения для всех явных с...
Свойство flex-wrap
Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.<br...
Функция repeating-linear-gradient()
Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему дей...
Свойство column-span
Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колон...
Свойство border-right-width
Устанавливает толщину правой границы элемента.