CSS :target — стиль елемента, на який вказує хеш в адресі
CSS-селектор :target обирає елемент, чий id збігається з хешем в адресі — тобто той, до якого читач щойно перейшов за якорем.
Загальний опис
автор: NagarD
Синтаксис
:target {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1.3 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Клацни посилання — адреса дістане якір #sec, і :target підсвітить елемент із цим id рамкою і тлом.
HTML
<p><a href="#sec">Перейди до розділу</a></p>
<h3 id="sec">Цільовий розділ</h3>CSS
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}Перехід за якорем підсвічує потрібний блок — читач одразу бачить, куди його привели.
HTML
<nav class="jump">
<a href="#one">До першого</a>
<a href="#two">До другого</a>
</nav>
<section id="one" class="chunk"><h3>Перший блок</h3><p>Текст першого блоку.</p></section>
<section id="two" class="chunk"><h3>Другий блок</h3><p>Текст другого блоку.</p></section>CSS
body {
font: 16px/1.5 system-ui, sans-serif;
}
.jump {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.chunk {
padding: .75rem 1rem;
border-left: 4px solid transparent;
transition: background .3s, border-color .3s;
}
/* блок, на який вказує хеш в адресі */
.chunk:target {
background: #fef9c3;
border-left-color: #eab308;
}Вкладки без жодного рядка JavaScript: посилання міняє хеш, :target показує відповідну панель.
HTML
<div class="tabs">
<nav>
<a href="#tab-css">CSS</a>
<a href="#tab-html">HTML</a>
</nav>
<article id="tab-css" class="panel"><h3>CSS</h3><p>Мова опису вигляду сторінки.</p></article>
<article id="tab-html" class="panel"><h3>HTML</h3><p>Мова розмітки документа.</p></article>
</div>CSS
.tabs {
font: 16px/1.5 system-ui, sans-serif;
max-width: 26rem;
}
.tabs nav {
display: flex;
gap: .5rem;
}
.tabs nav a {
padding: .5rem .9rem;
border: 1px solid #94a3b8;
border-bottom: 0;
border-radius: 6px 6px 0 0;
text-decoration: none;
color: #1d4ed8;
}
.panel {
display: none;
padding: 1rem;
border: 1px solid #94a3b8;
border-radius: 0 6px 6px 6px;
}
/* видно рівно ту панель, чий id стоїть в адресі */
.panel:target {
display: block;
}
/* поки хеша немає — показуємо першу */
.tabs:not(:has(:target)) .panel:first-of-type {
display: block;
}Коментарі
Коментарів ще немає — будьте першим!