Target css что это

:target¶

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo . Такая запись адреса называется «целевой элемент».

Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис¶

1 2 3 4

/* Selects an element with an ID matching the current URL's fragment */ :target  border: 2px solid black; > 

Спецификации¶

• HTML Living Standard
• Selectors Level 4
• Selectors Level 3

Примеры¶

Пример 1¶

В данном примере целевой элемент выделяется цветом фона.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

 html> head> meta charset="utf-8" /> title>targettitle> style> h2:target  background: #fc0; /* Цвет фона */ padding: 3px; > style> head> body> ul> li>a href="#h1">История 1a>li> li>a href="#h2">История 2a>li> ul> h2 id="h1">История 1h2> p> История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось. p> h2 id="h2">История 2h2> p> История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. p> body> html> 

Пример 2¶

Псевдокласс :target может быть использован для выделения части страницы, которая была связана, чтобы сформировать оглавление.

HTML CSS Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

h3>Table of Contentsh3> ol> li>a href="#p1">Jump to the first paragraph!a>li> li>a href="#p2">Jump to the second paragraph!a>li> li> a href="#nowhere" >This link goes nowhere, because the target doesn't exist.a > li> ol> h3>My Fun Articleh3> p id="p1"> You can target i>this paragraphi> using a URL fragment. Click on the link above to try out! p> p id="p2"> This is i>another paragraphi>, also accessible from the links above. Isn't that delightful? p> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

p:target  background-color: gold; > /* Add a pseudo-element inside the target element */ p:target::before  font: 70% sans-serif; content: '►'; color: limegreen; margin-right: 0.25em; > /* Style italic elements within the target element */ p:target i  color: red; > 

Пример 3¶

Вы можете использовать псевдокласс :target для создания лайтбокса без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После нацеливания CSS изменяет свое отображение так, чтобы они отображались.

HTML CSS Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

ul> li>a href="#example1">Open example #1a>li> li>a href="#example2">Open example #2a>li> ul> div class="lightbox" id="example1"> figure> a href="#" class="close">a> figcaption> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. figcaption> figure> div> div class="lightbox" id="example2"> figure> a href="#" class="close">a> figcaption> Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. figcaption> figure> div> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

/* Unopened lightbox */ .lightbox  display: none; > /* Opened lightbox */ .lightbox:target  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; > /* Lightbox content */ .lightbox figcaption  width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; > /* Close button */ .lightbox .close  position: relative; display: block; > .lightbox .close::after  right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: '×'; cursor: pointer; > /* Lightbox overlay */ .lightbox .close::before  left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.7); content: ''; cursor: default; > 

Ссылки¶

• Псевдо-класс :targetMDN (рус.)

Каскадные таблицы стилей CSS советы & приёмы

URL (унифицированный указатель ресурса) обычно указывает на страницу. Но если URL оканчивается на «#что-то», тогда он указывает на определенный элемент на данной странице. Браузеры обычно стараются убедиться, что целевой элемент виден и, если это возможно, расположен в верхней части экрана.

С помощью селектора ‘:target’ вы можете добавить особый стиль целевому элементу страницы, чтобы он привлекал больше внимания.

Но вы можете сделать даже больше. Вы можете скрывать или отображать элементы на основании того, являются ли они целевыми или нет. Ниже дан пример. Он показывает небольшое меню с четырьмя пунктами и каждый пункт ссылается на какой-то текст. Но сначала никакой текст не показывается. Каждый пункт — это ссылка на элемент с целевым ID (#item1, #item2. ) и эти элементы видны только тогда, когда являются целью текущего URL.

Попробуйте кликнуть на пункты меню и следите за адресной строкой браузера для того, чтобы увидеть текущий URL.

Это — элемент, соответствующий пункту 1. Он не должен быть видимым до тех пор, пока вы не последуете по ссылке в «#item1».

Если вы перешли к пункту 2, тогда этот элемент должен быть видимым.

Этот элемент виден, если вы щёлкните на третий пункт меню. Этот элемент имеет URL, который вы можете использовать где угодно. Вы можете вставить его в любую другую страничку и перейти прямо к этому пункту.

Вот, как это работает. Есть две важных части: источник HTML и свойство ‘display’. Сначала документ HTML. У него есть несколько ссылок и элементов с соответствующими ID:

пункт 1 пункт 2 пункт 3 очистить

. пункт 1.

. пункт 2.

.

Эти правила стилей сначала скрывают все P внутри DIV, но затем отменяют действие для P, который является текущей целью:

div.items p div.items p:target

Вот и все. Далее добавляются цвета, поля, границы и т.д., таким образом пример становится более похожим на меню. Вы можете посмотреть, как это делается, взглянув на исходный код страницы.

На самом деле, мы добавили ‘:not(:target)’, для того, чтобы убедиться, что браузеры CSS3 будут скрывать элементы. Следовательно, эти правила более подходящие:

div.items p:not(:target) div.items p:target

Интерфейс вкладок

Как только вы поняли описанное выше, для вас не будет проблемой немного поиграть и создать настоящий интерфейс с вкладками: набор правил стиля, который не только показывает различное содержание на основании того, какая кнопка нажата, но и также меняет внешний облик самих кнопок.

Вот пример. Он использует не ‘display: none’, а ‘z-index’. Если вы хотите знать, как это работает, просто выполните «посмотреть исходный код страницы»…

Псевдокласс :target

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo . Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис

Селектор:target

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Пример

• История 1
• История 2

В данном примере целевой элемент выделяется цветом фона.

Примечание

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Спецификация

Спецификация	Статус
Selectors Level 3	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

9

12

1

9.5

1.3

1

2.1

1

9.5

2

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Трюки с псевдоклассом :target

Псевдокласс :target (цель) выбирает тот элемент в документе, на который указывает фрагмент URL. Например, этот фрагмент текста обернут элементом с ID #target-test . Если вы перейдете по ссылке #target-test, то этот элемент станет целью и стили псевдокласса :target начнут действовать.

В прошлом году я уже писала о псевдоклассе :target в статье 5 малоиспользуемых селекторов CSS (и их применение). Первым примером было использование псевдокласса :target для подсветки раздела страницы, на который совершен переход. Это может быть, например, добавление фонового цвета или границы, как в примере с #target-test.

Но недавно я пришла к выводу, что мы можем использовать псевдокласс :target с большей пользой, создавая на странице интерактивные элементы без JavaScript.

Пример №1: скрытие и показ содержимого

Простым примером использования псевдокласса :target будет скрытие и показ содержимого, на которое мы нацелились. В блоге мы можем таким образом показывать раздел с комментариями после клика пользователя. Это делается простым скрытием элемента до тех пор, пока тот не подпадает под :target .

Show Comments 
Comments
 Hide Comments 
 

#comments:not(:target) < display: none; >#comments:target

Пример №2: выдвигающаяся навигация

Следующий пример это создание выдвигающейся панели навигации. Мы помещаем панель навигации фиксированно относительно области видимости, чтобы обеспечить отсутствие скачков после клика пользователя.

#nav < position: fixed; top: 0; height: 100%; width: 80%; max-width: 400px; >#nav:not(:target) < right: -100%; transition: right 1.5s; >#nav:target

Пример №3: всплывающее модальное окно

Развивая эту идею, мы можем создать модальное окно, заполняющее страницу целиком.

#modal-container < position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; >.modal < width: 70%; background: #fff; padding: 20px; text-align: center; >#modal-container:not(:target) < opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s; >#modal-container:target

Пример №4: изменение глобальных стилей

Последний пример нельзя назвать верным в плане семантики, это применение псевдокласса :target к элементу с последующей заменой стилей или раскладки страницы.

#body:not(:target) < main < width: 60%; >aside < width: 30%; >.show-sidebar-link < display: none; >> #body:target < main < width: 100%; >aside < display: none; >.hide-sidebar-link < display: none; >> 

Как насчет семантики и доступности?

Насколько я могу сказать, у этого метода есть два потенциальных недостатка:

1. Меняется URL, что влияет на историю браузера. Это значит, что при переходе пользователя “назад”, он может непреднамеренно перейти к целевому элементу.
2. Для закрытия целевого элемента пользователю надо перейти к другому элементу или просто к # . Последний вариант (который я использую в своих примерах) не является семантичным и может перенаправить пользователя к началу статьи, к чему пользователь может быть не готов.

Тем не менее, при корректном использовании этот метод можно использовать, как минимум, в качестве запасного варианта взаимодействия для пользователей с отключенным JavaScript. В некоторых случаях, как в первом примере, это даже может быть предпочтительнее и проще, чем использование JavaScript. Как всегда, это зависит от каждого конкретного случая.