: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' в этой спецификации.
Рекомендация Первое определение.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:targetChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 1.3WebView Android Полная поддержка 2Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 2Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

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