From 0e9a31050dcb3d5806cf4161c47d69128e46d5af Mon Sep 17 00:00:00 2001 From: DrakesBot12 Date: Thu, 11 Jun 2026 19:08:27 +0300 Subject: [PATCH 1/2] docs: target --- css/target/demos/basic/index.html | 133 ++++++++++++++++++++++++++++++ css/target/index.md | 133 +++++++++++++++++++++++------- 2 files changed, 235 insertions(+), 31 deletions(-) create mode 100644 css/target/demos/basic/index.html diff --git a/css/target/demos/basic/index.html b/css/target/demos/basic/index.html new file mode 100644 index 0000000000..f1a938bb38 --- /dev/null +++ b/css/target/demos/basic/index.html @@ -0,0 +1,133 @@ + + + + :target — Псевдоклассы — Дока + + + + + + + + + +
+ + +
+ Нажми на пункт меню — меняется :target +
+ +
+

HTML

+

Это содержимое становится активным, потому что его 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; + } +} +``` From 03007632e48272959d3f99a40e2673cc1031b8f8 Mon Sep 17 00:00:00 2001 From: DrakesWeb <89761315+DrakesBot12@users.noreply.github.com> Date: Sun, 5 Jul 2026 18:43:58 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=82=D0=B8?= =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit