Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе 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} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
- История 1
- История 2
История 1
История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.
История 2
История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.
В данном примере целевой элемент выделяется цветом фона.
Примечание
В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
Сегодня мы поговорим об основных функциях, связанных с псевдоклассом :target и о том, как вы можете использовать его для создания потрясающих эффектов на чистом CSS, научимся создавать слайд-шоу при помощи css и многое другое.
Что такое: target?
h1 { font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } h1: target { font-size: 50px; text-decoration: underline; color: #37aee4; }
Добавим анимацию
Давайте оживим наш эффект и добавим немного анимации, например, миленький перехода для изменения цвета. Смотрите, как это работает .
h1 { font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } h1:target { font-size: 50px; text-decoration: underline; color: #37aee4; }
Управление нецелевыми объектами
Скажем, мы хотим изменить стили абзаца, который идет после выбранного заголовка.
Сделать это очень просто при помощи следующего кода. Смотрите демо .
h1: target + р { background: #f7f7f7; padding: 10px; }
Создание простого слайд-шоу при помощи CSS
Разработчики придумали тонны приложений с использованием псевдокласса : target . Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.
Для создадим неупорядоченный список. Каждый элемент списка будет содержать якорь тега, указывающего на идентификатор фрагмента и изображение с соответствующим идентификатором.
- One
- Two
- Three
- Four
- Five
Теперь добавим наши стили:
* { margin: 0px; padding: 0px; } #slideshow { margin: 50px auto; position: relative; width: 400px; } ul { list-style: none; } li { float: left; overflow: hidden; margin: 0 20px 0 0; } li a { color: #222; text-decoration: none; font: 15px/1 Helvetica, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } li a:hover { color: #50b0df; } li img { position: absolute; top: 50px; left: 0; z-index: -1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } li img:target { z-index: 1; } li img:not(:target) { opacity: 0; }
Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.
Далее, установим z-index: -1 для всех изображений, а затем установите z-index: 1 для целевых изображений. Это приведёт к тому, что когда вы нажимаете на элемент списка, изображение изменяется. Чтобы сделать переход более плавным, мы установим значение непрозрачность для других изображений 0 .
Смотрите демонстрацию слайд-шоу на чистом CSS .
Кроссбраузерность
Псевдокласс : target является селектором CSS третьего уровня , это значит, что он поддерживается в практически любом браузере, за исключением (не за что не догадаетесь ) ... IE. Старый добрый ослик поддерживает CSS3-селекторы только в 9-ой и 10-ой версиях.
Как и любую другую проблемой отображения CSS3- селекторов в IE , это довольно легко исправить при помощи Selectivizr .
Благодаря этому плагину и магии вуду, нужные CSS3-селекторы будут поддерживаться даже в IE6.
Заключение
Поначалу использование псевдоклассов может показаться сложным, но зачем вы поймёте, как они могут облегчить работу и сделать сайт более интересным. Псевдоселектор
:target -хороший тому пример. Только убедитесь, что вы не переборщили со стилями.
Ещё один интересный пример использования :target
Псевдо класс:target является одной из замечательных особенностей CSS3. Он соответствует элементу, на который указывает идентификатор в URI документа.
Идентификатор в URI содержит символ “#”, за которым следует имя идентификатора, соответствующее значению атрибута id элемента в документе.
Поддержка
Так как мы говорим о CSS3, то псевдо класс поддерживается всеми современными браузерами, за исключением IE версий с 6 по 8. Обычное разочарование не должно останавливать вас в решении использовать:target. Уже IE9 поддерживает псевдо класс:target .
Как использовать:target?
Данный псевдо класс может иметь свой собственный стиль, так же как и псевдо классы :hover , :active или :focus для ссылок. Так же как и упомянутые псевдо классы :target используется при определенных действиях с веб сайтом. Особенно, когда используется идентификатор фрагмента, например, такой: http://example.com/index.html#lorem-ipsum .
Демонстрация
На демонстрационной странице приведен вполне наглядный пример того, как и когда использовать :target . Псевдо класс :target может улучшить уровень удобства использования вашего ресурса.
Разметка HTML
Ниже приводится пример из демонстрации. У нас есть 4 ссылки и такое же количество блоков. Каждая группа имеет свой уникальный идентификатор.
- Блок 1
- Блок 2
- Блок 3
- Блок 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.
Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.
CSS
Следующий код CSS позволяет добиться нужного эффекта, с помощью которого выделяется блок с соответствующим идентификатором (появляется тень вокруг прямоугольника).
/* Добавляем немного пространства */ ul, div { margin-bottom: 10px; } /* Cтиль блока по умолчанию */ div { padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border-radius: 5px; } /* Изменяем вид вывода при соответствии */ div:target { border-color: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px #9c9c9c; box-shadow: 0 0 4px #9c9c9c; }
Ниже представлен результат действия кода. Если нажать на ссылке, то соответствующий блок выделяется и становится активным.
target=»_blank используется, чтобы тег открыл ссылку в новом окне. Но что такое target HTML ? Почему он должен быть blank ? И самое интересное, почему вначале стоит подчеркивание? Давайте подробнее рассмотрим этот код и разберемся, что он делает.
Атрибут target
Значения target
Четыре наиболее распространенных значения атрибута target :
_self
Единственная ситуация, в которой это может произойти, если в HTML
использован тег
_blank
Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript , а не HTML .
Это значение атрибута target HTML лучше всего использовать для открытия на новой вкладке ссылок на внешние сайты или на PDF-файлы . Благодаря этому после закрытия этих вкладок пользователь снова попадает на ваш сайт. Но этим не следует злоупотреблять, так как пользователю будет довольно сложно ориентироваться, если каждая ссылка будет открываться на новой вкладке.
_parent
Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов