Зачем нужен псевдокласс target в CSS3.
В CSS3 появилось много нового, и сегодня мы разберем один из новых псевдоклассов - target.
Target с английского переводится как "цель" и это не просто так. Дело в том, что данный псевдокласс применяет какие-то стили к элементу, на который ссылаются. Объяснять это просто так нет смысла, лучше посмотрим сразу на пример.
К примеру, у нас есть такой HTML код:
<div id="id1">Какой-то текст</div>
Теперь мы можем сослаться на данный элемент из строки запроса
http://site.local/#id1
Таким образом мы сможем перейти к данному элементу.
Теперь рассмотрим пример с псевдоклассом target.
<a href="#id1">Ссылка</a>
<div>
<p id="id1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dignissimos odio eius, delectus autem facilis sunt vero ex, eum tempore excepturi harum voluptatem corporis modi, ducimus quam ab. Ipsa, officia.</p>
</div>
И пропишем для данного элемента стили
div p:target {
color: green;
}
Теперь, при клике по ссылке, текст в параграфе станет зеленого цвета, т.к. вы начнете на него ссылаться.
Итак, вот такой простой псевдокласс target в CSS3, однако, он позволяет делать очень крутые вещи. Одну из таких мы разберем в следующей статье.
Спасибо за внимание и удачи!
-
Создано 02.09.2014 16:27:23
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.