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


Содержание

Псевдокласс `:target` — стили для элемента-якоря в HTML-документе

November 04, 2013

Настала очередь изучить, что такое псевдо-класс .

Вопрос достаточно интересный как с точки зрения теории, так еще больше — с точки зрения практики.

Начнем издалека и вспомним (если кто читал) одну из глав книги Энди Бадда “Мастерская CSS”. Глава называется “Изменение стиля элемента при наведении указателя на отдаленный элемент” и речь в ней идет о том, как сделать так, чтобы управлять одним элементом с помощью другого.

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

Визуально создается впечатление, что они никак не связаны между собой. Но на самом деле они находятся внутри одного элемента — ссылки (ниже приведен кусок кода из этой главы в качестве примера):

Способ достаточно хорош, за исключением того, что применяется дополнительная разметка и нарушается семантика HTML-документа. На момент написания этой книги это был единственный способ управления “отдаленными элементами на странице.

Но на сегодняшний день существует еще один способ, более аккуратный и универсальный — с помощью псевдо-класса . Другое дело, что поддержка в браузерах этого CSS-свойства не полностью реализована и здесь можно смело показать пальцем в сторону браузера IE, в нем оно поддерживается, начиная с 9-ой версии.

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

Приведу в качестве примера кусок кода, демонстрирующий такой подход:

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

Вид ссылки может быть не обязательно таким, но и более длинным — . Все, что располагается в ней после знака диез , называется .

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

Для одного из параграфов мы уже назначили идентификатор, который является якорем. Пропишем для него немного правил:

Мы изменили семейство шрифтов, кегль и цвет. Эти правила устанавливаются “как обычно”, то есть — как прописали, так они и отображаются в браузере. Теперь создадим немного стилей, которые первоначально себя никак не проявляют, а только по происшествии какого-то события.

В нашем случае это будет клик на ссылке. Для таких правил синтаксис следующий:

Откроем созданную нами страницу в браузере — и почти ничего не увидим. Точнее — только те правила, которые явно прописаны в первом куске кода. Но если кликнуть мышью на ссылке с текстом , то увидим достаточно занимательную трансформацию параграфа. Это псевдо-класс в действии!

Он применил прописанные для него правила только при совершении некоего события. И применены они были к обособленному участку HTML-кода (помеченному идентификатором ), который почти никак не связан со ссылкой.

Можно немного усложнить пример и связать несколько параграфов между собой, то есть таким образом:

Откроем вновь страницу в браузере и посмотрим результат. Все ОК.

Псевдо-класс может принимать любые CSS-свойства, в том числе скрытие\показ элементов с помощью правила . Последнее довольно часто применяется при верстке различных блоков.

На странице сайта MDN приведен пример создания одного из таких блоков — CSS LightBox. Другим ярким примером использования этого элемента являются вкладки на чистом CSS, где необходима смена цвета вкладок и их содержимого при переключении.

Ниже привожу, как всегда, полный текст кода.

В принципе, это и все, что можно сказать о псевдо-классе .

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

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

Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target, для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.
Прежде всего, хотелось бы сказать, что данный псевдокласс срабатывает при случае совпадения идентификатора находящегося в URL, с элементом находящимся в документе. Если говорить более простыми словами, то при следующей ссылке #id1, в html документе должен присутствовать элемент с данным идентификатором, и при клике на данную ссылку будет применен псевдокласс target.
Для большей детализации рассмотрим все на примере. Для начала напишите у себя следующий html код:

Цукерберг рекомендует:  Ищите себя, развивайтесь

id =»id_1″ > Образец текста, к которому будут применять стили.

id =»id_2″ > Второй образец текста, к которому будут применять стили.

id =»id_3″ > Третий образец текста, к которому будут применять стили.

id =»id_4″ > Четвертый образец текста, к которому будут применять стили.

target в CSS. Как это работает?

В Сети можно легко найти множество уроков с применением псевдокласса :target. Однако, не будем следовать чужому коду, а попробуем разобраться в нем и понять, как это работает? Конечно, не обойдется и без примеров

Что такое :target?

В CSS :target это псевдокласс, позволяющий выбрать некоторый целый «кусок» вашего HTML-документа, над которым будет производится некоторое действие. Это может быть абзац текста или заголовок, к примеру.

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

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

Идентификаторы фрагментов

Если кратко — это такая штука, к которой подвязывается наш псевдокласс. Это хэштег со словом или фразой, которая ставится в конце адреса. Выглядит вот таким образом:

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

Это работает на чистом HTML, никаких ухищрений не требуется. Небольшой пример работы идентификаторов.


Обработка клика с помощью :target

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

Код очень простой — при клике заголовок меняет свой размер, цвет и подчеркивается. Можно добавить жизни (Руслан, привет ) и сделать анимацию смены цвета заголовка:

Подсвечивать активный заголовок дело хорошее, но как быть, если нужно изменить оформление текста, идущего за ним? CSS дает нам такую возможность. Выглядит это следующим образом:

В данном случае, плюс означает, что стиль должен быть применен для следующего за заголовком абзаца. Таким образом, при изменении активного заголовка — мы меняем и оформление раздела с текстом, который ему «принадлежит».

Поддержка браузерами

Псевдокласс target относится к третьей редакции CSS и отлично поддерживается всеми браузерами, кроме IE, старше 9 версии Поэтому не стоит его внедрять, если ваша аудитория использует этот браузер. Хотя, выход из положения есть — это Selectvizr, JS библиотека, с помощью которой можно заставить IE работать с CSS3. Просто добавляем скрипт и все, оно работает.

Единственное, если вы не используете у себя JQuery или MooTools — нужно подключить, для работы этого скрипта. На официальном сайте есть таблица, какие библиотеки чего поддерживают. Если будет интересно — почитайте. Это тут.

Заключение

Использование псевдоклассов может показаться сложным занятием, но как только вы поймете, как они работают — вы сможете делать удивительные вещи, используя только CSS и больше ничего. Псевдокласс :target — отличное тому подтверждение. С его помощью можно кардинально изменить взаимодействие страницы с посетителем. Пример выше — самый простой, но и он добавляет немного интерактивности на страницу. А ведь это всего лишь пара строк кода.

Не переусердствуйте с красотой и поддержкой браузерами и все будет отлично.

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

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

Синтаксис ?

Обозначения

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

×

Пример

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

Примечание

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

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

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

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

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

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

×

Браузеры ?

9 12 1 9.5 1.3 1

Браузеры

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

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

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

Форма входа и регистрации с помощью HTML5 и CSS3

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.

Здесь мы назначим свойства для шапки:

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.


Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.

Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс .animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

CSS :target Selector

Example

Highlight active HTML anchor:

Definition and Usage

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

Version: CSS3

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:target 4.0 9.0 3.5 3.2 9.6

CSS Syntax

More Examples

Example

Create a tabbed menu:

.tab div:target <
display: block;
>

Example

Create a modal (dialog box):

/* The modal’s background */
.modal <
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
>

/* Display the modal when targeted */
.modal:target <
display: table;
position: absolute;
>

/* The modal box */
.modal-dialog <
display: table-cell;
vertical-align: middle;
>

/* The modal’s content */
.modal-dialog .modal-content <
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>

CSS псевдокласс :target


Значение и применение

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

Поддержка браузерами

Селектор Chrome Firefox Opera Safari IExplorer Edge
:target 4.0 3.5 9.6 3.2 9.0 12.0

CSS синтаксис:

Версия CSS

Пример использования

В этом примере после перехода по якорный ссылке стилизуется абзац (HTML элемент

) на который был произведен переход. На изображении отображен пример перехода на элемент со значением «test2» глобального атрибута id:

Пример использования псевдокласса :target. CSS селекторы

Кажется, вы используете блокировщик рекламы :(

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

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

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

Этот псевдокласс поддерживается всеми современными браузерами, за исключением IE версий с 6 по 8. Но уже IE9 поддерживает псевдокласс :target.

:target может иметь свой собственный стиль, так же как и псевдоклассы :hover, :active и :focus для ссылок. :target используется при определенных действиях сайтом. Особенно, когда используется идентификатор фрагмента, например, такой: http://domain.com/page.html#tag

Псевдокласс :target может значительно улучшить уровень удобства использования сайта, если, например, оформить стиль активного элемента…

СSS Псевдо-классы

Что такое псевдо-классы?

Псевдо-класс используется для определения особого состояния элемента.

Например, он может быть использован для:

  • Стиля элемента при наведении курсора мыши
  • Стиля посещенных и непосещенных ссылок
  • Стиля элемента, для получения фокуса

Наведении курсора мыши

Синтаксис

Установить псевдо-класс

Ссылки могут отображаться различными способами:

Пример

/* непросмотренная ссылка */
a:link <
color: #FF0000;
>

/* просмотренная ссылка */
a:visited <
color: #00FF00;
>

/* наведение мыши на ссылку */
a:hover <
color: #FF00FF;
>

/* активная ссылка */
a:active <
color: #0000FF;
>

Примечание: a:hover должен перейти после a:link и a:visited в определение CSS для того, чтобы быть эффективней! a:active должен перейти после a:hover в определение CSS для того, чтобы быть эффективнее! Псевдо-классы не чувствительны к регистру.

Псевдо-классы и классы CSS

Псевдо-классы должны быть объединены с классами CSS:

При наведении курсора на ссылку в примере ниже, она изменит цвет:

Пример

Пример использования псевдо-класса :hover элемента

Пример

Наведите курсор на элемент

(как всплывающая подсказка):


Наведите курсор на меня, чтобы показать элемент

Пример

p <
display: none;
background-color: yellow;
padding: 20px;
>

div:hover p <
display: block;
>

Псевдо-класс — :first-child

Псевдо-класс :first-child соответствует заданному элементу, который является первым ребенком элемента, другого элемента.

Первый ребенок параграфа

В следующем примере селектор сопоставляется каждому элементу

, который является первым ребенком элемента:

Пример

Первый ребенок элемента во всех

В следующем примере селектор сопоставляется первый элемент во всех элементах

Пример

Все дети элементов в первом элементе

В следующем примере селектор сопоставляется всем элементам в элементе

, что первый ребенок от другого элемента:

Пример

Псевдо-класс — :lang

Псевдо-класс :lang позволяет определить специальные правила для разных языков.

В пример ниже, :lang определяет кавычки для элементах с lang=»no» :

Пример

Начало текста Цитата в параграфе конец текста.

CSS :target Selector

Example

Highlight active HTML anchor:

Definition and Usage

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.

The :target selector can be used to style the current active target element.

Version: CSS3

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:target 4.0 9.0 3.5 3.2 9.6

CSS Syntax

More Examples

Example

Create a tabbed menu:

.tab div:target <
display: block;
>

Example

Create a modal (dialog box):

/* The modal’s background */
.modal <
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
>

/* Display the modal when targeted */
.modal:target <
display: table;
position: absolute;
>

/* The modal box */
.modal-dialog <
display: table-cell;
vertical-align: middle;
>

/* The modal’s content */
.modal-dialog .modal-content <
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих