Псевдокласс :target – одна из интересных возможностей CSS3. Он соответствует элементу, который является целью идентификатора в URI документа. Этот идентификатор содержит в URI символ «#», за которым следует имя идентификатора, которое соответствует значению атрибута id элемента в документе.

Поддержка 

Так как мы говорим о CSS3, этот псевдокласс поддерживается всеми браузерами с поддержкой CSS3, кроме браузера Internet Explorer с 6 до 8 версий включительно, что не является неожиданным. Тем не менее, начиная с версии 9, браузер Internet Explorer поддерживает псевдокласс :target.

Как можно использовать :target 

Этому псевдоклассу можно задать стили так же, как мы задаем стили псевдоклассам :hover, :active или :focus ссылки. Во многом как и вышеперечисленные псевдоклассы :target используется при некоторых взаимодействиях с сайтом, например, чтобы выделить часть текста, связанную с ссылкой.

Пример 

Дальше мы приведем пример того, когда и как использовать псевдокласс :target. В демонстрации работы ниже Вы можете увидеть, как использование псевдокласса :target может повысить удобство использования веб-сайта.

Демонстрация работы

Разметка HTML 

Ниже у нас есть список из 4 ссылок и такое же количество блоков. Вы можете обратить внимание, что у каждой группы есть уникальный id как идентификатор.

<ul>
<li><a href="#id1">Block 1</a></li>
<li><a href="#id2">Block 2</a></li>
<li><a href="#id3">Block 3</a></li>
<li><a href="#id4">Block 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 

Следующий ряд свойств задаст стили содержимому, чтобы получить желаемый эффект, — выделить текущей идентификатор, в этом примере он будет выделен тенью, окружающей блок.

/* Добавим расстояние */
ul, div {
margin-bottom: 10px;
}

/* Стиль стандартного блока */
div {
padding: 10px;
border: 1px solid #eaeaea;
border-radius: 5px;
}
/* Меняем его внешний вид, когда он выделен */
div:target {
border-color: #9c9c9c;
box-shadow: 0 0 4px #9c9c9c;
}

Ниже Вы можете увидеть результат: после нажатия на элемент списка соответствующий блок будет выделен.

И это все 

Надеемся, Вам понравился этот урок, и он Вам пригодится!

Дополнительные источники:

• w3.org
• Создание галереи изображений с помощью псевдокласса :target
• Интерфейсы, основанные на псевдоклассе CSS3 :target

Автор урока Catalin Rosu

Перевод — Дежурка

Смотрите также:

• Знакомство с единицами измерения CSS: пикселями, EM и процентами
• Знакомство со структурным селектором CSS3 :first-of-type
• Обращения к файлу определенного типа при помощи селектора атрибутов CSS