Настала очередь изучить, что такое псевдо-класс
.
Вопрос достаточно интересный как с точки зрения теории, так еще больше - с точки зрения практики.
Начнем издалека и вспомним (если кто читал) одну из глав книги Энди Бадда “Мастерская CSS”. Глава называется “Изменение стиля элемента при наведении указателя на отдаленный элемент” и речь в ней идет о том, как сделать так, чтобы управлять одним элементом с помощью другого.
Техника, описанная в данной главе, представляла из себя следующее. В ссылку вкладывались несколько элементов, которые позиционировались абсолютно на странице и размещались в любом ее месте.
Визуально создается впечатление, что они никак не связаны между собой. Но на самом деле они находятся внутри одного элемента - ссылки (ниже приведен кусок кода из этой главы в качестве примера):
<a title="Richard Rutter" href="http://www.clagnut.com/">
<span class="link">» Richard Rutter</span>
</a>Способ достаточно хорош, за исключением того, что применяется дополнительная разметка и нарушается семантика HTML-документа. На момент написания этой книги это был единственный способ управления “отдаленными элементами на странице.
Но на сегодняшний день существует еще один способ, более аккуратный и универсальный - с помощью псевдо-класса 1
:target
С помощью этого псевдо-класса можно управлять абсолютно любым элементом в документе. При этом он не обязан располагаться в каком-то определенном месте, наоборот - он может находиться в нормальном потоке и не нарушать семантику.
Приведу в качестве примера кусок кода, демонстрирующий такой подход:
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor</p>
<p>Lorem ipsum dolor <a href="#example">Example</a> et dolore magna aliqua.</p>
<p id="example">Lorem ipsum dolor sit amet, ut enim ad minim veniam</p>
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>Видим ссылку, помещенную в середине документа, обрамленную элементами 1
p
1
href
1
#example
1
id="example"
Вид ссылки может быть не обязательно таким, но и более длинным - 1
http://localhost:7788/third/#example
1
#
1
хэштег
Псевдо-класс 1
:target
Для одного из параграфов мы уже назначили идентификатор, который является якорем. Пропишем для него немного правил:
#example{
font: 12px Georgia, serif;
color: #778899;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}Мы изменили семейство шрифтов, кегль и цвет. Эти правила устанавливаются “как обычно”, то есть - как прописали, так они и отображаются в браузере. Теперь создадим немного стилей, которые первоначально себя никак не проявляют, а только по происшествии какого-то события.
В нашем случае это будет клик на ссылке. Для таких правил синтаксис следующий:
#example:target{
color: #bbddff;
font-weight: bold;
outline: 1px solid #ff0000;
padding: 20px;
text-shadow: 1px 1px 1px #667788;
}Откроем созданную нами страницу в браузере - и почти ничего не увидим. Точнее - только те правила, которые явно прописаны в первом куске кода. Но если кликнуть мышью на ссылке с текстом 1
Example
1
:target
Он применил прописанные для него правила только при совершении некоего события. И применены они были к обособленному участку HTML-кода (помеченному идентификатором 1
#example
Можно немного усложнить пример и связать несколько параграфов между собой, то есть таким образом:
#example:target + p{
font-variant: small-caps;
font-weight: bold;
color: #0000ff;
text-indent: 3em;
}Откроем вновь страницу в браузере и посмотрим результат. Все ОК.
Псевдо-класс 1
:target
1
display
На странице сайта MDN приведен пример создания одного из таких блоков - CSS LightBox. Другим ярким примером использования этого элемента являются вкладки на чистом CSS, где необходима смена цвета вкладок и их содержимого при переключении.
Ниже привожу, как всегда, полный текст кода.
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor</p>
<p>Lorem ipsum dolor <a href="#example">Example</a> et dolore magna aliqua.</p>
<p id="example">Lorem ipsum dolor sit amet, ut enim ad minim veniam</p>
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut</p>#example{
font: 12px Georgia, serif;
color: #778899;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#example:target{
color: #bbddff;
font-weight: bold;
outline: 1px solid #ff0000;
padding: 20px;
text-shadow: 1px 1px 1px #667788;
}
#example:target + p{
font-variant: small-caps;
font-weight: bold;
color: #0000ff;
text-indent: 3em;
}В принципе, это и все, что можно сказать о псевдо-классе 1
:target