Псевдоселектор :target

Январь 30, 2010 ||  css ||  комментарии

Элемент target это элемент с идентификатором (ID) на который мы ссылаемся ссылкой типа – site.com/page.html#id. И псевдокласс :target как раз срабатывает при обращении к этому элементу. К примеру селектор #someid:target сработает когда мы сошлемся на этот элемент – site.com/page.html#someid.

Три раза переписывал, все равно отстой )

Этот селектор можно использовать нетипичным способом. Например при обращении к элементу можно его например сдвинуть, спрятать и так далее. Минус в том что если элемент находится внизу страницы документ будет прыгать к нему, все ж таки это так и задумывалось. Но если элемент с которым мы работаем находится вверху страницы то прыгать ничего не будет.

Короче говоря – пример выдвигающейся панели на этом методе.

Теперь подробнее.

HTML

<a class="info_open" href="#info">Open Info</a>
<div class="info" id="info">
    <div class="panel">
        …
        <a class="info_close" href="#close">Close Info</a>
    </div>
<div class="content">
    …
</div>

Div который скрывается/показывается – это div#info.

CSS

Начальные стили этого блока:

.info {
    width: 600px;
    margin: auto;
    height: 208px;
    position: absolute;
    top: -250px;
    z-index: 1000;
}

Благодаря отрицательному top этот блок не виден изначально. Ссылка a.info_open обращается к этому диву (href=”#info”) и срабатывает псевдоселектор.

.info:target {
    position: relative;
    top: 0px;
}

top: 0px сдвигает блок и он становится видимым, а position: relative нужен чтобы участвовать в потоке и сдвинуть контент.

target

Ну и чтобы закрыть панель нужно убрать обращение к элементу – ссылка a.close_info. Кнопка a.open_info спозиционирована абсолютно поэтому при появлении div.info она просто перекрывается им.

IE

Для IE это все работает благодаря скрипту target.js от Mark Wubben, который имитирует поведение псевдоселектора.

пример

По теме:

Где работает:

comments powered by Disqus