:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

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

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

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

Синтаксис

Error: could not find syntax for this item

Примеры

Таблица контента

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

HTML

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

css
p:target {
  background-color: gold;
}

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

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

Результат

Pure-CSS lightbox

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

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

HTML

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

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, 0.7);
  content: "";
  cursor: default;
}

Результат

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

Specification
HTML Standard
# selector-target
Selectors Level 4
# the-target-pseudo

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

BCD tables only load in the browser

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