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

Элемент 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 нужен чтобы участвовать в потоке и сдвинуть контент.

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

IE

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

пример

Работает в:

По теме:

CSSPlay: Pull Down Information Panel
MDN :target
CSS3.info: Making an image gallery with :target

Tags:

Комментировать