doka-guide · DrakesBot12 · Jun 11, 2026 · Jul 5, 2026 · Aug 30, 2026 · Aug 30, 2026
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>:target — Псевдоклассы — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 50px;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .container {
+      width: 420px;
+    }
+
+    nav {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 25px;
+      flex-wrap: wrap;
+    }
+
+    nav a {
+      color: #FFFFFF;
+      text-decoration: none;
+      border-bottom: 2px solid #2E9AFF;
+      padding-bottom: 2px;
+      transition: background-color 0.2s;
+      border-radius: 3px;
+    }
+
+    nav a:hover {
+      background-color: #2E9AFF;
+      color: #000000;
+    }
+
+    section {
+      padding: 25px;
+      border: 1px solid #2E9AFF;
+      border-radius: 10px;
+      background-color: #1f2023;
+      display: none;
+    }
+
+    section:target {
+      display: block;
+      animation: fade 0.2s ease-in;
+    }
+
+    @keyframes fade {
+      from {
+        opacity: 0;
+        transform: translateY(6px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .hint {
+      font-size: 14px;
+      opacity: 0.7;
+      margin-bottom: 15px;
+    }
+
+    h2 {
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+
+    p {
+      line-height: 1.5;
+      opacity: 0.9;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <nav>
+      <a href="#html">HTML</a>
+      <a href="#css">CSS</a>
+      <a href="#js">JS</a>
+    </nav>
+
+    <div class="hint">
+      Нажми на пункт меню — меняется <code>:target</code>
+    </div>
+
+    <section id="html">
+      <h2>HTML</h2>
+      <p>Это содержимое становится активным, потому что его id совпадает с якорем в URL.</p>
+    </section>
+
+    <section id="css">
+      <h2>CSS</h2>
+      <p>Когда этот блок становится :target, он отображается и получает акцентную рамку.</p>
+    </section>
+
+    <section id="js">
+      <h2>JavaScript</h2>
+      <p>Псевдокласс :target реагирует на изменение fragment identifier (#js).</p>
+    </section>
+  </div>
+</body>
+</html>
@@ -1,8 +1,14 @@
 ---
 title: "`:target`"
 description: "Управляет стилем элемента, на который ссылается якорная ссылка."
+baseline:
+  - group: target
+    features:
+      - css.selectors.target
 authors:
   - bellabzhu
+contributors:
+  - drakesbot12
 related:
   - css/pseudoclasses
   - css/id-selector
@@ -13,60 +19,118 @@ tags:
 
 ## Кратко
 
-Есть ссылки, которые ведут не просто на страницу, а на конкретный HTML-элемент внутри. Псевдокласс `:target` управляет стилем этого элемента.
+Псевдокласс `:target` выбирает элемент, на который указывает фрагмент URL — часть адреса после символа `#`.
+
+Это позволяет изменять внешний вид элемента, к которому пользователь перешёл по якорной ссылке.
+
+Например, если открыт адрес: `https://doka.guide/css/target/#example`, то браузер найдёт элемент с идентификатором `example` и применит к нему стили из селектора `:target`.
+
+## Пример
+
+Часто `:target` используют для подсветки разделов статьи после перехода по оглавлению.
+
+```html
+<nav>
+  <a href="#html">HTML</a>
+  <a href="#css">CSS</a>
+  <a href="#js">JavaScript</a>
+</nav>
+
+<section id="html">
+  <h2>HTML</h2>
+</section>
+
+<section id="css">
+  <h2>CSS</h2>
+</section>
+
+<section id="js">
+  <h2>JavaScript</h2>
+</section>
+```
+
+```css
+section:target {
+  background-color: #fff4b8;
+}
+```
+
+<iframe title="Пример работы :target" src="demos/basic/" height="320"></iframe>
 
 ## Как пишется
 
-После любого селектора ставим двоеточие и пишем ключевое слово target.
+После селектора ставим двоеточие и указываем псевдокласс `target`.
 
 ```css
 .title {
   color: black;
 }
 
-.title:target{
+.title:target {
   color: pink;
 }
 ```
 
+Можно комбинировать `:target` с псевдоэлементами:
+
 ```css
 p:target::before {
-  content: '';
-  font-size: 10px;
+  content: "►";
   color: yellow;
+  margin-right: 0.25em;
 }
 ```
 
-## Как понять
-
-Браузер видит идентификатор в адресной строке — он идёт после символа # — и находит HTML-элемент, у которого такой же id. Стилем этого элемента и управляет псевдокласс `:target`.
+А также со вложенными селекторами:
 
-## Пример
+```css
+article:target h2 {
+  color: crimson;
+}
+```
 
-Сейчас в адресной строке такой URL:
+## Как понять
 
-```
-https://doka.guide/html/a/#podskazki
-```
+Когда браузер загружает страницу, он анализирует её адрес. Если в URL есть фрагмент после символа `#`, браузер ищет элемент с соответствующим значением атрибута `id`. Например, для адреса:
+`https://example.com/help/#installation`
 
-Движок находит элемент с id «podskazki» и подставляет ему дополнительный автоматический класс, чтобы пометить изменение состояния.
+целевым элементом станет:
 
 ```html
-<div class="container" id="podskazki">
-  <h2>Подсказки</h2>
-</div>
+<section id="installation">
+  Инструкция по установке
+</section>
 ```
 
+Такой элемент считается текущей целью документа и совпадает с селектором `:target`. Важно понимать, что браузер не добавляет элементу дополнительный класс. Вместо этого он временно считает элемент подходящим под псевдокласс `:target`. Если пользователь перейдёт по другому якорю, состояние автоматически перейдёт к новому элементу. Если в URL нет фрагмента или соответствующий элемент не найден, `:target` не совпадает ни с одним элементом страницы.
+
+## Подсказки
+
+💡 `:target` удобно использовать для подсветки разделов длинных статей после перехода по оглавлению.
+💡 Часто применяется вместе с плавной прокруткой:
+
 ```css
-.container {
-  background-color: white;
+html {
+  scroll-behavior: smooth;
 }
+```
+
+💡 С помощью `:target` можно создавать простые интерфейсы без JavaScript — например, вкладки, аккордеоны или модальные окна.
+💡 Целевым элементом может быть любой HTML-элемент с уникальным `id`, а не только заголовки и секции.
+💡 Хорошей практикой считается добавлять анимацию или визуальный акцент, чтобы пользователь сразу заметил нужный элемент:
 
-.container:target {
-  background-color: yellow;
+```css
+:target {
+  animation: highlight 1s ease;
 }
-```
 
-Этому классу мы можем задавать любые стили, подходящие по дизайну.
+@keyframes highlight {
+  from {
+    background-color: #ffec99;
+  }
 
-Когда мы перейдём по другому якорю и ссылка сменится, то и все свойства `:target` перейдут со старого элемента на новый. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.
+  to {
+    background-color: transparent;
+  }
+}
+```