Творческое использование селектора псевдо-класса :target

Что есть :target?

Говоря по простому, :target есть pseudo-class (псевдо-класс^એ), который направлен на часть идентификатора в адресе URI^એ документа.

Рассмотрим следующий URI:

http://example.com/example.php#references

Теперь допустим, что ваша таблица стилей содержит следующее определение:

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

Если пользователь сделает переход по адресу url http://example.com/example.php#references, то элемент с идентификатором references получит свойства по определениям target и определённый выше стиль будет применён к указанному элементу.

Что касается совместимости с броузерами, то :target полностью поддерживается Chrome 4+, Firefox 3.5+, IE 9+, Opera 9.5+ and Safari 3.2+.

Хватит теории и посмотрим, как селектор :target может быть вам полезен.

Модальные всплывающие окна

Модальные всплывающие окна очень популярны на многих вэб-сайтах: показать сообщение читателям, сделать подписку для рассылки и многое другое. А знаете ли Вы, как легко можно сделать модальные окна на чистом CSS, используя селектор :target псевдо-класса? Прочитайте подробную статью и посмотрите «живой» пример. Вы не будете разочарованы!
«Живой» пример – Подробная статья

Фокусировка контента с селектором :target

Практически это самое естественное применение селектора псевдо-класса :target. Хорошим примером здесь является Wikipedia, где target используется для подсветки контента.
«Живой» пример – Подробная статья

Слайдшоу с чистой CSS анимацией

Помните те времена, когда создание слайд-шоу изображений было трудоёмкой задачей с обязательным использванием JavaScript? Теперь с CSS3 красивое слайд-шоу легко и просто сделать без JavaScript. Впечатляющий пример с селектором :target Вы можете посмотреть в примере .
«Живой» пример – Подробная статья

Слайд-панель навигации

Меню на слайд-панели навигации стало самым популярным, особенно на мобильных сайтах (mobile websites). Фактически это самый простой способ компактного меню для любого сайта. Используя :target, навигацю можно сделать на чистом CSS. Любой разработчик должен опробовать этот интересный метод прямо сегодня.
«Живой» пример – Подробная статья

Лайтбокс на чистом CSS3

Вау, этот пример демонстрирует всю мощь CSS3: лайтбокс со множеством эффектов без JavaScript и интересное применение :target.
«Живой» пример – Подробная статья