Главная > CSS/Style Sheets > CSS-селектор :target

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


21 декабря 2012, 12:00. Разместил: Design FactoRy
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 может служить просто родным классом при использовании хэштегов на окнах.
Вернуться назад