Псевдо класс :target является одной из замечательных особенностей CSS3. Он соответствует элементу, на который указывает идентификатор в URI документа.
Идентификатор в URI содержит символ “#”, за которым следует имя идентификатора, соответствующее значению атрибута id элемента в документе.
Поддержка
Так как мы говорим о CSS3, то псевдо класс поддерживается всеми современными браузерами, за исключением IE версий с 6 по 8. Обычное разочарование не должно останавливать вас в решении использовать :target. Уже IE9 поддерживает псевдо класс :target.
Как использовать :target?
Данный псевдо класс может иметь свой собственный стиль, так же как и псевдо классы :hover, :active или :focus для ссылок. Так же как и упомянутые псевдо классы :target используется при определенных действиях с веб сайтом. Особенно, когда используется идентификатор фрагмента, например, такой: http://example.com/index.html#lorem-ipsum.
Демонстрация
На демонстрационной странице приведен вполне наглядный пример того, как и когда использовать :target. Псевдо класс :target может улучшить уровень удобства использования вашего ресурса.
Разметка HTML
Ниже приводится пример из демонстрации. У нас есть 4 ссылки и такое же количество блоков. Каждая группа имеет свой уникальный идентификатор.
<ul>
<li><a href="#id1">Блок 1</a></li>
<li><a href="#id2">Блок 2</a></li>
<li><a href="#id3">Блок 3</a></li>
<li><a href="#id4">Блок 4</a></li>
</ul>
<div id="id1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. </p>
</div>
<div id="id2">
<p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div id="id3">
<p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
<div id="id4">
<p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p>
</div>
CSS
Следующий код CSS позволяет добиться нужного эффекта, с помощью которого выделяется блок с соответствующим идентификатором (появляется тень вокруг прямоугольника).
/* Добавляем немного пространства */
ul, div
{
margin-bottom: 10px;
}
/* Cтиль блока по умолчанию */
div
{
padding: 10px;
border: 1px solid #eaeaea;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Изменяем вид вывода при соответствии */
div:target
{
border-color: #9c9c9c;
-moz-box-shadow: 0 0 4px #9c9c9c;
-webkit-box-shadow: 0 0 4px #9c9c9c;
box-shadow: 0 0 4px #9c9c9c;
}
Ниже представлен результат действия кода. Если нажать на ссылке, то соответствующий блок выделяется и становится активным.