: ціль - CSS-хитрощі | Альманах CSS 2025

:targetСелектор псевдо в CSS відповідає , коли хеш в URL і ідентифікатор елемента є однаковими. Наприклад, якщо поточна URL-адреса:

https://css-tricks.com/#voters

І це існувало в HTML:

 Content

Цей селектор відповідав би:

:target ( background: yellow; )

І цей sectionелемент мав би жовтий фон.

З цим загальним #faqелементом селектора (який відповідає всьому, що трапляється як ціль), якщо URL-адреса змінюється на закінчується, і є інший елемент з ідентифікатором faq, цей селектор знову збігається, і #faqелемент має жовтий фон.

Ви можете обмежити це, конкретно визначивши, на які елементи ви хочете націлитись

#voters:target ( )

Коли б ви користувались цим?

Одна з можливостей - коли вам потрібен стиль із “станами”. Коли на сторінці є певний хеш, він перебуває в такому стані. Це не настільки універсально, як маніпулювання іменами класів (оскільки може бути лише один, і це може бути пов’язано лише з одним елементом), але схоже. Все, що ви могли б зробити, змінивши клас для зміни стану, ви могли б зробити, коли елемент знаходиться :target. Наприклад: змінити кольори, змінити положення, змінити зображення, приховати / показати речі, що завгодно.

Я б скористався цими правилами, коли :targetце вдалий вибір:

Коли потрібна “держава”
Коли поведінка стрибка вниз / хеш-посилання є прийнятною
Коли прийнятно впливати на історію браузера

Як ви отримуєте хеші в URL-адресах?

Найпоширеніший спосіб - це натискання користувачем посилання, яке містить хеш. Це може бути внутрішнє посилання (на одній сторінці) або повноцінна URL-адреса, яка закінчується хешем та значенням. Приклади:

Go To There Go To There

Поведінка стрибків

Незалежно від того, це посилання на одну сторінку чи ні, поведінка браузера полягає в прокручуванні сторінки, поки цей елемент не опиниться вгорі сторінки . Або, наскільки це можливо, якщо він не може прокрутити так далеко. Це досить важливо знати, оскільки це означає, що використання цієї “заявленої” поведінки є дещо хитрим / обмеженим.

Наприклад, одного разу я спробував різноманітні прийоми, щоб відтворити функціональні вкладки CSS, але врешті-решт вирішив, що використання прапорця було кращою ідеєю, оскільки це дозволяє уникнути проблем зі стрибком сторінки. Ян Хенссон з CSS Science також має кілька прикладів вкладок. Його третій приклад використовує :targetі абсолютно позиціонуючі елементи, приховані вгорі сторінки, щоб запобігти поведінці переходу сторінки. Це розумно, але загальне ідеальне рішення, тому що це означало б, що сторінка стрибає вгору, якщо вкладки опускаються далі на сторінці.

Більше інформації

Стаття тут про CSS-хитрощі: Про: ціль
Селектори рівень 4 специфікації
Проста галерея зображень із використанням: target (страждає від переходу на сторінку, хороший приклад тому) Кріса Хайльмана
Демонстрація техніки жовтого вицвітання (хоча для існуючого, а не нещодавно доданого вмісту) від Блокнота веб-дизайнера.
CSS Target, буквально, від Калеба Огдена.
CSS: ціль для позаекранних дизайнів
Документи MDN