Псевдокласс target в CSS
Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target,
для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.
Прежде всего, хотелось бы сказать, что данный псевдокласс срабатывает при случае совпадения идентификатора находящегося в URL, с элементом
находящимся в документе. Если говорить более простыми словами, то при следующей ссылке #id1, в html документе должен присутствовать
элемент с данным идентификатором, и при клике на данную ссылку будет применен псевдокласс target.
Для большей детализации рассмотрим все на примере. Для начала напишите у себя следующий html код:
<html>
<head>
<title>Тема</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<a href="#id_1">Первая ссылка</a>
<a href="#id_2">Вторая ссылка</a>
<a href="#id_3">Третья ссылка</a>
<a href="#id_4">Четвертая ссылка</a>
<div class="text">
<p id="id_1">Образец текста, к которому будут применять стили.</p>
<p id="id_2">Второй образец текста, к которому будут применять стили.</p>
<p id="id_3">Третий образец текста, к которому будут применять стили.</p>
<p id="id_4">Четвертый образец текста, к которому будут применять стили.</p>
</div>
</body>
</html>
После реализации структуры, нам остается лишь применить CSS код, который приведен ниже:
a {
color: #00f;
display: block;
}
.text p:target {
background: #ccc;
border: 2px solid #000;
}
Все реализовано, теперь при нажатии на ссылку на вашем экране должно быть что-то подобное:
Принцип понятен, остается лишь только включить воображение и добавлять больше стилей, для реализации более сложных меню и других вещей.
А на этом я прощаюсь с Вами, теперь Вы будете вооружены еще одним замечательным псевдоклассом, который будет помогать Вам решать различные задачи
без помощи скриптов.
