path: root/files/ru/web/css/_colon_target/index.html

---
title: ':target'
slug: 'Web/CSS/:target'
tags:
  - Верстка
  - Псевдоклассы
translation_of: 'Web/CSS/:target'
---
<div>{{CSSRef}}</div>

<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс </a> <a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>:target</code></strong> представляет уникальный элемент (целевой элемент) с подходящим {{htmlattrxref("id")}}  URL-фрагментом.</p>

<pre class="brush: css no-line-numbers">/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
:target {
  border: 2px solid black;
}</pre>

<p>Для примера, следующий URL имеет фрагмент (обозначается знаком <em>#</em>), который указывает на элемент с именем <code>section2</code>:</p>

<pre>http://www.example.com/index.html#section2</pre>

<p>Следующий элмент будет выбран селектором <code>:target</code>, если текущий URL равен вышеуказанному:</p>

<pre class="brush: html">&lt;section id="section2"&gt;Example&lt;/section&gt;</pre>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Примеры">Примеры</h2>

<h3 id="Таблица_контента">Таблица контента</h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;h3&gt;Table of Contents&lt;/h3&gt;
&lt;ol&gt;
 &lt;li&gt;&lt;a href="#p1"&gt;Jump to the first paragraph!&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#p2"&gt;Jump to the second paragraph!&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#nowhere"&gt;This link goes nowhere,
   because the target doesn't exist.&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

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

<h4 id="CSS">CSS</h4>

<pre class="brush: css">p:target {
  background-color: gold;
}

/* Добавление псевдоэлемента внутрь target-элемента */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/* Стиль italic-элементов без target-элемента */
p:target i {
  color: red;
}</pre>

<h4 id="Результат">Результат</h4>

<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div>

<h3 id="Pure-CSS_lightbox">Pure-CSS lightbox</h3>

<p>Вы можете использовать псевдо-класс <code>:target</code> для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  <code>display</code> на видимый.</p>

<div class="note"><strong>Примечание:</strong> Более полный pure-CSS lightbox , основанный на псевдоклассе<code>:target</code> -  <a href="https://github.com/madmurphy/takefive.css/">available on GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#example1"&gt;Open example #1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#example2"&gt;Open example #2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="lightbox" id="example1"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="close"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;div class="lightbox" id="example2"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="close"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">/* Закрываем lightbox */
.lightbox {
  display: none;
}

/* Открываем lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Содержимое lightbox  */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* Кнопка закрытия */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Обертка lightbox  */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}</pre>

<h4 id="Результат_2">Результат</h4>

<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Определена HTML-специфика семантики.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Без изменений.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>Первое определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>



<div>{{Compat("css.selectors.target")}}</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Using the :target pseudo-class in selectors</a></li>
</ul>