Target css что это
November 04, 2013
Начнем издалека и вспомним (если кто читал) одну из глав книги Энди Бадда “Мастерская CSS”. Глава называется “Изменение стиля элемента при наведении указателя на отдаленный элемент” и речь в ней идет о том, как сделать так, чтобы управлять одним элементом с помощью другого.
Техника, описанная в данной главе, представляла из себя следующее. В ссылку вкладывались несколько элементов, которые позиционировались абсолютно на странице и размещались в любом ее месте.
Способ достаточно хорош, за исключением того, что применяется дополнительная разметка и нарушается семантика HTML-документа. На момент написания этой книги это был единственный способ управления “отдаленными элементами на странице.
Приведу в качестве примера кусок кода, демонстрирующий такой подход:
Псевдо-класс :target как раз и служит для стилизации элемента с якорем, на который указывает такая ссылка. Давайте приступим к стилизации, чтобы воочию увидеть, как работает этот псевдо-элемент.
Для одного из параграфов мы уже назначили идентификатор, который является якорем. Пропишем для него немного правил:
В нашем случае это будет клик на ссылке. Для таких правил синтаксис следующий:
Он применил прописанные для него правила только при совершении некоего события. И применены они были к обособленному участку HTML-кода (помеченному идентификатором #example ), который почти никак не связан со ссылкой.
Можно немного усложнить пример и связать несколько параграфов между собой, то есть таким образом:
Откроем вновь страницу в браузере и посмотрим результат. Все ОК.
Ниже привожу, как всегда, полный текст кода.
Псевдоклассы СSS :not() и :target
Подсветка фрагментов страницы псевдоклассом :target
После нескольких штрихов и работы с CSS получается результат, который приведен ниже:
Здесь всё просто: три вкладки и контент с привязкой. Добавим CSS :
Улучшаем доступность
Отрицание селекторов при помощи :not()
Посмотрите на пример формы, в которой используется текстовые элементы ввода и radio buttons :
К сожалению, это не поможет, так как каждый новый селектор переписывает предыдущий. Это всё равно, что писать:
Вместо этого, нужно связать псевдоклассы :not() в цепочку, чтобы они отфильтровывали все элементы input :
Приведённая цепочка селекторов также соответствует элементам [type=image], [type=reset], [type=color] и [type=submit]
К сожалению, пока далеко не все браузеры поддерживают этот вариант, поэтому мы рекомендуем и дальше использовать цепочки.
Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, отклики, лайки, дизлайки!
16 мая 2012 | Опубликовано в css | 3 Комментариев »
Сегодня мы поговорим об основных функциях, связанных с псевдоклассом :target и о том, как вы можете использовать его для создания потрясающих эффектов на чистом CSS, научимся создавать слайд-шоу при помощи css и многое другое.
Что такое: target?
: target является псевдоклассом и относится к группе псевдоклассов (псевдоселекторов), которые определяют текущее состояние элемента и применяют к ним стили.
Псевдокласс, с которым вы, вероятно, наиболее знакомы — :hover, он позволяет объявить специальный стиль, который будет активирован при наведении указателя мыши на элемент. При помощи псевдокласса :target вы так же можете создавать свои стили, которые будут активированы в конкретной ситуации.
Целевой элемент
Специальное событие для псевдокласса :target зависит от идентификатора, который указан в конце адресной строки браузера или так называемого «целевого элемента».
:target срабатывает тогда, когда хэш URL адреса и идентификатор элемента совпадают.
Вот небольшая демонстрация того, как это работает.
Эта страница содержит ряд тегов h1, каждый из которых обладает уникальным ID. Вот основная структура документа:
Использование: target для создания события при нажатии
Теперь пришло время использовать наш псевдокласс :target. Стиль для элемента :target будет активирован только тогда, будет активна ссылка, на которую нажали.
Добавим анимацию
Управление нецелевыми объектами
Скажем, мы хотим изменить стили абзаца, который идет после выбранного заголовка.
Сделать это очень просто при помощи следующего кода. Смотрите демо здесь.
Создание простого слайд-шоу при помощи CSS
Разработчики придумали тонны приложений с использованием псевдокласса : target. Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.
Для создадим неупорядоченный список. Каждый элемент списка будет содержать якорь тега, указывающего на идентификатор фрагмента и изображение с соответствующим идентификатором.
Теперь добавим наши стили:
Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.
Смотрите демонстрацию слайд-шоу на чистом CSS здесь.
Кроссбраузерность
Благодаря этому плагину и магии вуду, нужные CSS3-селекторы будут поддерживаться даже в IE6.
Заключение
Поначалу использование псевдоклассов может показаться сложным, но зачем вы поймёте, как они могут облегчить работу и сделать сайт более интересным. Псевдоселектор
:target-хороший тому пример. Только убедитесь, что вы не переборщили со стилями.
По материалам статьи designshack
Ещё один интересный пример использования :target смотрите здесь
Зачем нужен псевдо класс :target CSS3
Псевдо класс :target является одной из замечательных особенностей CSS3. Он соответствует элементу, на который указывает идентификатор в URI документа.
Идентификатор в URI содержит символ “#”, за которым следует имя идентификатора, соответствующее значению атрибута id элемента в документе.
Поддержка
Как использовать :target?
Демонстрация
На демонстрационной странице приведен вполне наглядный пример того, как и когда использовать :target. Псевдо класс :target может улучшить уровень удобства использования вашего ресурса.
Разметка HTML
Ниже приводится пример из демонстрации. У нас есть 4 ссылки и такое же количество блоков. Каждая группа имеет свой уникальный идентификатор.
Следующий код CSS позволяет добиться нужного эффекта, с помощью которого выделяется блок с соответствующим идентификатором (появляется тень вокруг прямоугольника).
Ниже представлен результат действия кода. Если нажать на ссылке, то соответствующий блок выделяется и становится активным.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
Перевел: Сергей Фастунов
Урок создан: 15 Февраля 2011
Просмотров: 27758
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Трюки с псевдоклассом :target
В прошлом году я уже писала о псевдоклассе :target в статье 5 малоиспользуемых селекторов CSS (и их применение). Первым примером было использование псевдокласса :target для подсветки раздела страницы, на который совершен переход. Это может быть, например, добавление фонового цвета или границы, как в примере с #target-test.
Но недавно я пришла к выводу, что мы можем использовать псевдокласс :target с большей пользой, создавая на странице интерактивные элементы без JavaScript.
Пример №1: скрытие и показ содержимого
Пример №2: выдвигающаяся навигация
Следующий пример это создание выдвигающейся панели навигации. Мы помещаем панель навигации фиксированно относительно области видимости, чтобы обеспечить отсутствие скачков после клика пользователя.
Пример №3: всплывающее модальное окно
Развивая эту идею, мы можем создать модальное окно, заполняющее страницу целиком.
Пример №4: изменение глобальных стилей
Последний пример нельзя назвать верным в плане семантики, это применение псевдокласса :target к элементу с последующей заменой стилей или раскладки страницы.
Как насчет семантики и доступности?
Насколько я могу сказать, у этого метода есть два потенциальных недостатка:
Тем не менее, при корректном использовании этот метод можно использовать, как минимум, в качестве запасного варианта взаимодействия для пользователей с отключенным JavaScript. В некоторых случаях, как в первом примере, это даже может быть предпочтительнее и проще, чем использование JavaScript. Как всегда, это зависит от каждого конкретного случая.