Псевдоклассы CSS, изменяющие стили после определенных действий пользователей, существуют очень давно. Вы точно знакомы с такими псевдоклассами, как :hover, :active и :focus, а некоторые даже могут вспомнить восторг от появления возможности смены цветов ссылок с их помощью в браузере Internet Explorer 4 в далеком 1997 году.

CSS3 представил новый псевдокласс :target, который уменьшает необходимость использования скриптов в интерактивных элементах. Например, у страницы с ссылкой вида http://mysite.com/page#mytarget к элементу с идентификатором mytarget могут применяться соответствующие стили для псевдокласса :target.

Поддержка браузерами псевдокласса :target 

Все современные версии браузеров поддерживают псевдокласс :target, проблем не будет и с браузером Internet Explorer от версии 9, и с большинством версий браузеров Chrome, Firefox, Safari и Opera. К сожалению, старые версии браузера Internet Explorer не поддерживают этот псевдокласс. Но если Вам очень нужна поддержка старых версий, можно воспользоваться, например, библиотекой JavaScript selectivizr, которая без особых сложностей добавит поддержку псевдокласса :target.

Простой документ, использующий псевдокласса :target 

Рассмотрим пример использования псевдокласса :target.

Например, текст мелким шрифтом в стандартном контракте, такой как расписание платежей, условия хостинга, условия расторжения контракта, условия поддержки, словарь и т. п. может располагаться на одной или нескольких веб-страницах. Даже если стараться быть кратким, эти тексты могут значительно разрастись.

Вот отрывок кода документа HTML5 из contract.html:

<h1>Website Contract</h1>

<nav>
	<ul>
		<li><a href="#payment">Payment Schedule</a></li>
		<li><a href="#support">Support &amp; Maintenance</a></li>
		<li><a href="#hosting">Hosting Terms</a></li>
		<li><a href="#glossary">Glossary</a></li>
	</ul>
</nav>

<article id="payment">
<h2>Payment Schedule</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

<article id="support">
<h2>Support &amp; Maintenance</h2>
<p>Ut euismod tempor porttitor.</p>
</article>

<article id="hosting">
<h2>Hosting Terms</h2>
<p>Suspendisse ac nisl lorem, ut fermentum erat.</p>
</article>
<article id="glossary">
<h2>Glossary</h2>
<p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.</p>
</article>

Можно воспользоваться псевдоклассом :target, чтобы визуально выделить активную часть документа, например:

article:target
{
	background-color: #ffc;
	border: 2px solid #fcc;
}

Так что пользователь, читающий контракт, может нажать на пункт меню, чтобы визуально выделить соответствующую часть документа. А также можно давать пользователям прямые ссылки на определенные разделы, например, contract.html#support.

Псевдокласс :target дает и другие возможности, например, можно создавать динамические эффекты с помощью HTML5 и CSS, без использования JavaScript. В следующих уроках мы покажем другие примеры использования псевдокласса :target.

Автор урока Craig Buckler