:target

Описание

Псевдокласс CSS :target позволяет задать стили оформления для целевых элементов.
В двух словах о том,что такое целевой элемент. Некоторые сслки (URL) содержат в себе идентификатор элемента страницы, к которому происходит переход. Такой элемент и называтся целевым. Вот пример подобной ссылки:
http://mysites.ru/article#second
Целевым элементом в данном случае является элемент с идентификтором #second.

:target
Область применения: все элементы
Поддержка браузерами: IE 9+, Chrome 1+, Opera 9.5+, Safari 1.3+, Firefox 1+, Androin 2.1+, Safari Mobile 2+
Версия CSS: CSS3
Примечание:

Синтаксис

element:target {...style...}
элемент:target {...стиль...}

Пример

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>target</title>
        <style>
            .item:target {
                background: #55f;
                color: #fff; 
            }
        </style>
    </head>
    <body>
        <p><a href="#item-1">Элемент 1</a></p>
        <p><a href="#item-2">Элемент 2</a></p>
        <div class="item" id="item-1">
            <h2>Элемент 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tellus lacus, sit amet laoreet nisl. Vestibulum laoreet fermentum semper. Mauris dapibus suscipit blandit. Mauris at dapibus risus. Nulla auctor, elit vitae convallis lacinia, erat est malesuada urna, sit amet aliquam velit elit quis orci. Sed sed felis orci. Nunc ultricies justo non ante porttitor lacinia. Proin nec metus ac orci vulputate fringilla at et orci. </p>
        </div>
        <div class="item" id="item-2">
            <h2>Элемент 2</h2>
            <p>Nunc elit nunc, euismod ac pretium a, iaculis eu dui. Maecenas nec nunc odio, sit amet scelerisque nisi. In hac habitasse platea dictumst. Vivamus malesuada, libero eu porta aliquam, tellus purus faucibus libero, eget iaculis quam dui in velit. Donec feugiat, felis quis rutrum auctor, leo orci auctor urna, eu cursus libero massa non mi. Nullam posuere mi a ipsum ultrices tristique. Aliquam dictum viverra lorem, eu vehicula dui hendrerit et. Cras interdum facilisis erat id ullamcorper. Nulla facilisi. </p>
        </div>
    </body>
</html>

Попробовать в DemoPlay

Комментирование запрещено.