198 подписчиков
Псевдокласс :target в CSS используется для стилизации элемента, который соответствует фрагменту идентификатора в URL. Это позволяет изменять стиль элемента, когда он становится "целью" (target) в результате взаимодействия пользователя, например, при нажатии на ссылку.
Пример использования :target
Рассмотрим простой пример, где мы используем псевдокласс :target для отображения скрытого содержимого при нажатии на ссылку.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример :target</title>
<style>
/* Скрываем содержимое по умолчанию
*/ .content { display: none; }
/* Показываем содержимое, когда оно является целью */
#section1:target,
#section2:target{
display: block;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc; }
/* Стили для ссылок */
a {
display: inline-block;
margin: 10px;
text-decoration: none;
color: blue; }
</style>
</head>
<body>
<h1>Пример использования псевдокласса :target</h1>
<nav>
<a href="#section1">Раздел 1</a>
<a href="#section2">Раздел 2</a>
</nav>
<div id="section1" class="content">
<h2>Содержимое Раздела 1</h2>
<p>Это содержимое для первого раздела.</p>
</div>
<div id="section2" class="content">
<h2>Содержимое Раздела 2</h2>
<p>Это содержимое для второго раздела.</p>
</div>
</body>
</html>
Объяснение кода
HTML-структура:
Созданы две ссылки, которые ссылаются на разные разделы с идентификаторами section1 и section2.
Каждое содержимое раздела обернуто в div с классом content.
CSS:
Содержимое по умолчанию скрыто с помощью display: none;.
Когда элемент с идентификатором section1 или section2 становится целью (например, при нажатии на соответствующую ссылку), его стиль изменяется на display: block;, что делает его видимым.
Как это работает
Когда пользователь нажимает на ссылку, браузер добавляет фрагмент идентификатора к URL (например, #section1). Псевдокласс :target активируется для элемента с соответствующим идентификатором, и CSS применяет заданные стили, показывая скрытое содержимое.
Этот подход часто используется для создания простых вкладок, аккордеонов и других интерактивных элементов без необходимости использования JavaScript.
1 минута
16 июля 2025