Псевдо-класс :target

Псевдо-класс :target позволяет связать гиперссылку <a> с любым элементом на странице, при этом значение атрибута href ссылки должно начинаться с символа # и содержать идентификатор id выбранного элемента (якорь). При нажатии на ссылку с идентификатором якоря, псевдо-класс :target применяет заданный стиль к элементу с якорем. То есть, когда мы кликаем по ссылке, в адресе которой содержится фрагмент идентификатора элемента, этот элемент становится целью (отсюда и :target).

Данный прием можно использовать для создания быстрой навигации по странице с выделением текущего раздела. Чтобы просмотреть данный пример на странице, нажмите на надпись Edit on CODEPEN встроенного редактора, расположенного ниже.

See the Pen mAZwBq by Elena (@html5book) on CodePen.

Или же для создания слайдера:

See the Pen jrbwLd by Elena (@html5book) on CodePen.