:target

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

/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
:target {
  border: 2px solid black;
}

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

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

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

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

Синтаксис

: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;
}

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

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

Результат

Pure-CSS lightbox

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

Примечание: Более полный pure-CSS lightbox , основанный на псевдоклассе:targetavailable on GitHub (demo).

HTML

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

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

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

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;
}

Результат

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

Спецификация Статус Комментарий
HTML Living Standard
Определение ':target' в этой спецификации.
Живой стандарт Определена HTML-специфика семантики.
Selectors Level 4
Определение ':target' в этой спецификации.
Рабочий черновик Без изменений.
Selectors Level 3
Определение ':target' в этой спецификации.
Рекомендация Первое определение.

Поддержка браузерами

BCD tables only load in the browser

Смотрите также