—»     —»   CSS-селектор :target
  Раздел: CSS/Style Sheets   Нет комментариев  

CSS-селектор :target



CSS-селектор :target

Сегодня мы хотим рассказать вам об одном интересном CSS-селекторе – :target. Данный псевдо-селектор предоставляет нам возможность стилизовать элементы, ID которых совпадает с хэштегом окна локации. Давайте быстренько взглянем на то, как работает этот CSS псевдо-селектор.

* Посмотреть демо

HTML

Давайте предположим, что у нас есть несколько HTML-элементов с заданным ID:

<h2 id="section1">Section 1</h2>
<h2 id="section2">Section 2</h2>

Обратите внимание на ID-значения элементов выше – для того, чтобы запустить псевдо-селектор :target, нам нужно, чтоб совпадал параметр window.location.hash.

CSS-код

Псевдо-селектор :target может быть применен к классам, тегам, либо любому другому селектору:

/* would apply to all targetted elements */
:target {
color: #000;
}

/* applies to H2's */
h2:target {
color: #f00;
}

Некоторым CSS-параметрам понадобятся браузерные префиксы.

Когда window.location.hash будет иметь значение «section2», цвет элемента будет становиться красным, а также появится подчеркивание. Все просто! Примерно так же, как вы анимируете элементы при наведении или даже больше похоже на media queries, вы даже можете анимировать элемент, когда он определен псевдо-селектором. Крис Койер предлагает нам невероятный пример анимации с определением.

:target очень удобен, но мы не увидели в этом псевдо-селекторе чего-то сверхъестественного. Если веб-сайт не должен предоставлять пользователям невероятную динамику, то псевдо-селектор :target может служить просто родным классом при использовании хэштегов на окнах.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4638   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31