Это содержимое становится активным, потому что его id совпадает с якорем в URL.
+
+
+
+
CSS
+
Когда этот блок становится :target, он отображается и получает акцентную рамку.
+
+
+
+
JavaScript
+
Псевдокласс :target реагирует на изменение fragment identifier (#js).
+
+
+
+
diff --git a/css/target/index.md b/css/target/index.md
index 6978bcb7aa..d9402882fe 100644
--- a/css/target/index.md
+++ b/css/target/index.md
@@ -1,72 +1,143 @@
---
+
title: "`:target`"
description: "Управляет стилем элемента, на который ссылается якорная ссылка."
authors:
- - bellabzhu
-related:
- - css/pseudoclasses
- - css/id-selector
- - html/a
-tags:
- - doka
+
+* bellabzhu
+ contributors:
+* drakesbot12
+ related:
+* css/pseudoclasses
+* css/id-selector
+* html/a
+ tags:
+* doka
+
---
## Кратко
-Есть ссылки, которые ведут не просто на страницу, а на конкретный HTML-элемент внутри. Псевдокласс `:target` управляет стилем этого элемента.
+Псевдокласс `:target` выбирает элемент, на который указывает фрагмент URL — часть адреса после символа `#`.
+
+Это позволяет изменять внешний вид элемента, к которому пользователь перешёл по якорной ссылке.
+
+Например, если открыт адрес:
+
+```text
+https://doka.guide/css/target/#example
+```
+
+то браузер найдёт элемент с идентификатором `example` и применит к нему стили из селектора `:target`.
+
+---
+
+## Пример
+
+Часто `:target` используют для подсветки разделов статьи после перехода по оглавлению.
+
+```html
+
+
+
+
HTML
+
+
+
+
CSS
+
+
+
+
JavaScript
+
+```
+
+```css
+section:target {
+ background-color: #fff4b8;
+}
+```
+
+
## Как пишется
-После любого селектора ставим двоеточие и пишем ключевое слово 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
-
-
Подсказки
-
+
+ Инструкция по установке
+
```
+Такой элемент считается текущей целью документа и совпадает с селектором `:target`. Важно понимать, что браузер не добавляет элементу дополнительный класс. Вместо этого он временно считает элемент подходящим под псевдокласс `:target`. Если пользователь перейдёт по другому якорю, состояние автоматически перейдёт к новому элементу. Если в URL нет фрагмента или соответствующий элемент не найден, `:target` не совпадает ни с одним элементом страницы.
+
+## Подсказки
+
+💡 `:target` удобно использовать для подсветки разделов длинных статей после перехода по оглавлению.
+💡 Часто применяется вместе с плавной прокруткой:
+
```css
-.container {
- background-color: white;
+html {
+ scroll-behavior: smooth;
}
+```
-.container:target {
- background-color: yellow;
+💡 С помощью `:target` можно создавать простые интерфейсы без JavaScript — например, вкладки, аккордеоны или модальные окна.
+💡 Целевым элементом может быть любой HTML-элемент с уникальным `id`, а не только заголовки и секции.
+💡 Хорошей практикой считается добавлять анимацию или визуальный акцент, чтобы пользователь сразу заметил нужный элемент:
+
+```css
+:target {
+ animation: highlight 1s ease;
}
-```
-Этому классу мы можем задавать любые стили, подходящие по дизайну.
+@keyframes highlight {
+ from {
+ background-color: #ffec99;
+ }
-Когда мы перейдём по другому якорю и ссылка сменится, то и все свойства `:target` перейдут со старого элемента на новый. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.
+ to {
+ background-color: transparent;
+ }
+}
+```