Главная > CSS/Style Sheets > CSS-селектор :target
CSS-селектор :target21 декабря 2012, 12:00. Разместил: Design FactoRy |
Сегодня мы хотим рассказать вам об одном интересном CSS-селекторе – :target. Данный псевдо-селектор предоставляет нам возможность стилизовать элементы, ID которых совпадает с хэштегом окна локации. Давайте быстренько взглянем на то, как работает этот CSS псевдо-селектор. * Посмотреть демо HTML Давайте предположим, что у нас есть несколько HTML-элементов с заданным ID:
Обратите внимание на ID-значения элементов выше – для того, чтобы запустить псевдо-селектор :target, нам нужно, чтоб совпадал параметр window.location.hash. CSS-код Псевдо-селектор :target может быть применен к классам, тегам, либо любому другому селектору:
Некоторым CSS-параметрам понадобятся браузерные префиксы. Когда window.location.hash будет иметь значение «section2», цвет элемента будет становиться красным, а также появится подчеркивание. Все просто! Примерно так же, как вы анимируете элементы при наведении или даже больше похоже на media queries, вы даже можете анимировать элемент, когда он определен псевдо-селектором. Крис Койер предлагает нам невероятный пример анимации с определением. :target очень удобен, но мы не увидели в этом псевдо-селекторе чего-то сверхъестественного. Если веб-сайт не должен предоставлять пользователям невероятную динамику, то псевдо-селектор :target может служить просто родным классом при использовании хэштегов на окнах. Вернуться назад |