: таргет - ЦСС-трикови | ЦСС Алманац 2025

:targetСелектор Псеудо у ЦСС-у одговара када су исти хасх у УРЛ и ИД елемента. На пример, ако је тренутна УРЛ адреса:

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

А ово је постојало у ХТМЛ-у:

 Content

Овај селектор би одговарао:

:target ( background: yellow; )

И тај sectionелемент би имао жуту позадину.

Са тим генеричким избором селектора (који подудара све што је случајно циљ), ако се УРЛ промени да се завршава #faqи постоји други елемент са ИД-ом faq, тај селектор би се поново подударао и #faqелемент би имао жуту позадину.

Можете да га ограничите тако што ћете прецизно одредити које елементе желите да циљате

#voters:target ( )

Када бисте ово користили?

Једна од могућности је када желите стил са „државама“. Када страница има одређени хеш, она је у том стању. Није толико свестран као манипулисање именима класа (јер може бити само један и може бити повезан само с једним елементом), али је сличан. Све што бисте могли да промените у класи да бисте променили стање, могли бисте да урадите када је елемент у :target. На пример: промените боје, промените положај, промените слике, сакријте / прикажите ствари, било шта.

Користио бих следећа правила када :targetје добар избор:

Када је потребна „држава“
Када је прихватљиво понашање прескакања надоле / хеш-везе
Када је прихватљиво утицати на историју прегледача

Како се добијају хеши у УРЛ-овима?

Најчешћи начин је да корисник кликне на везу која садржи хеш. То може бити интерна веза (на истој страници) или потпуно квалификована УРЛ адреса која се завршава хешом и вредношћу. Примери:

Go To There Go To There

Понашање скакања

Без обзира да ли је реч о истој страници или не, понашање прегледача је померање странице док тај елемент не буде на врху странице . Или, колико може, ако не може да се помери толико далеко. Ово је прилично важно знати, јер то значи да је искоришћавање овог „наведеног“ понашања помало незгодно / ограничено.

На пример, једном сам пробао разне технике за копирање функционалних ЦСС картица, али на крају сам одлучио да је хаковање са поља за потврду боља идеја јер избегава проблеме са прескакањем странице. Иан Ханссон из ЦСС Сциенце такође има неке примере картица. Његов трећи пример користи :targetи апсолутно позициониране елементе скривене изнад врха странице како би се спречило понашање приликом прескакања странице. Паметно је, али свеукупно савршено решење, јер би то значило да ће страница скочити нагоре ако се језичци спусте даље на страници.

Више информација

Чланак овде о ЦСС триковима: На: циљ
Селектори нивоа 4 спец
Једноставна галерија слика која користи: таргет (пати од проблема са прескакањем странице, добар пример за то) Цхриса Хеилманна
Демонстрација технике жутог блеђења (иако за постојећи садржај, а не за ново додати садржај) из Бележнице Веб Десигнер.
ЦСС мета, буквално, Цалеб Огден.
ЦСС: циљ за дизајн ван екрана
МДН доцс