CSS, HTML и многое другое…

Одим из новых селекторов в CSS3 является псевдо-класс :target, который может быть применен к элементу с идентификатором (name или id). Предположим с у вас есть заголовок с id="chapter_2":

<h3 id="chapter_2">The Title of the Chapter</h3>

Вы можете создать прямую ссылку на этот элемент, добавив идентификатор в конце ссылки:

http://www.example.com/index.html#chapter_2

А с помощью :target поменять фон у этого заголовка, чтобы обозначить место куда вела ссылка.

h3:target {
background-color: #ff0
}

Очень полезная функция, не правда ли? Однако она может быть еще более полезной. Например для создания фотогаллереи на CSS.

Посмотрите на этот пример в браузере который поддерживает :target (на данный момент это Mozilla, Webkit или Opera).

Нажимая на ссылки вы можете просматривать различные изображения, и это делается с минимальным количеством кода и без использования скриптов.

Первый шаг заключается в том, чтобы создать список с изображением, именем и ссылкой на каждый элемент списка, например:

<ol>
    <li id="one">
        <p><a href="#one">One</a></p>
	<img src="one.jpg">
    </li>
    <li id="two">
        <p><a href="#two">Two</a></p>
	<img src="two.jpg">
    </li>
    <li id="tre">
        <p><a href="#tre">Tre</a></p>
	<img src="tre.jpg">
    </li>
</ol>

Каждый элемент списка должен иметь id и ссылку на него. Все картинки абсолютно спозиционированы в верхней части, а с помощью селектора мы просто меняем z-index у них:

img {
position: absolute
}
li:target img {
z-index: 100
}

Конечно, это лишь простой пример. С большей изобретательностью это может стать весьма полезным инструментом.

Оригинал: Making an image gallery with :target