Skip to content

Дополняет доку про псевдокласс :target #6029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DrakesBot12 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Дополняет доку про псевдокласс :target #6029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e9a310
docs: target
DrakesBot12 Jun 11, 2026
0300763
форматирование
DrakesBot12 Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions css/target/demos/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
133 changes: 102 additions & 31 deletions css/target/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<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;
}
```

.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;
}
}
```
Loading