:target

Псевдокласс :target CSS псевдокласса представляет собой уникальный элемент (элемент-мишень) с id, соответствующим фрагменту URL.

/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

Например, следующий URL имеет фрагмент (обозначенный знаком #), который указывает на элемент, называемый section2:

http://www.example.com/index.html#section2

Следующий элемент будет выбран с помощью :target селектора, когда текущий URL будет равен вышеуказанному:

<section id="section2">Example</section>

Синтаксис

:target {
  /* ... */
}

Примечание: Из-за возможной ошибки в спецификации CSS, :target не работает внутри компонента веб-приложения, потому что корень тени не передаёт элемент-мишень в дерево тени.

Примеры

Таблица содержания

Псевдокласс :target может использоваться для выделения части страницы, на которую есть ссылка из таблицы содержания.

HTML

<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere">
      This link goes nowhere, because the target doesn't exist.
    </a>
  </li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the link
  above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the links above. Isn't
  that delightful?
</p>

CSS

p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

Результат

Спецификации

Спецификация
Стандарт HTML # selector-target
Уровень 4 селекторов # the-target-pseudo

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:target`	1	12	1	9.5	1.3	18	4	10.1	2	1.0	2

См. также

Использование псевдокласса :target в селекторах

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:target