CSS псевдокласс :target

Псевдокласс :target выбирает текущий активный целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы.

/* Выбор активного элемента, связанного с фрагментом
   URL (например, #link) */
:target { background: silver; }

Фрагмент URL — это то, что следует за знаком решётки ( # ):

<a href="https://website.ru/page.html#link">Ссылка</a>

URL с фрагментом идентификатора можно использовать для ссылки на определённую часть страницы, называемую целевым элементом. Это позволяет сразу переходить к нужному разделу страницы без ручной прокрутки.

Псевдокласс :target работает с элементами, у которых есть атрибут id с соответствующим значением. Например:

<div id="link"></div>

После клика пользователя по ссылке, у которой в значении атрибута href содержится фрагмент с идентификатором #link:

<a href="#link">Ссылка</a>

     <!-- или -->
	 
<a href="https://puzzleweb.ru/css/sel_target.php#link">
  Ссылка
</a>

псевдокласс :target применит стили к элементу, к которому был осуществлён переход и идентификатор которого соответствует фрагменту (в нашем случае к элементу <div>, у которого значение атрибута id соответствует фрагменту с идентификатором).

Пример

.tab div { display: none; }
.tab div:target { display: block; }

<div class="tab">
  <a href="#link1">Ссылка 1</a>
  <a href="#link2">Ссылка 2</a>
  <a href="#link3">Ссылка 3</a>

  <div id="link1">
    <h3>Содержимое по ссылке 1</h3>
    <p>Hello World!</p>
  </div>

  <div id="link2">
    <h3>Содержимое по ссылке 2</h3>
    <p>Привет Мир!!</p>
  </div>

  <div id="link3">
    <h3>Содержимое по ссылке 3</h3>
    <p>Ещё увидимся!</p>
  </div>
</div>