Сегодня мы поговорим об основных функциях, связанных с псевдоклассом :target и о том, как вы можете использовать его для создания потрясающих эффектов на чистом CSS, научимся создавать слайд-шоу при помощи css и многое другое.

Что такое: target?

: target является псевдоклассом и относится к группе псевдоклассов (псевдоселекторов), которые определяют текущее состояние элемента и применяют к ним стили.

Псевдокласс, с которым вы, вероятно, наиболее знакомы — :hover, он позволяет объявить специальный стиль, который будет активирован при наведении указателя мыши на элемент. При помощи псевдокласса :target вы так же  можете создавать свои стили, которые будут активированы в конкретной ситуации.

Целевой элемент

Специальное событие для псевдокласса :target зависит от идентификатора, который указан в конце адресной строки браузера или так называемого «целевого элемента».

:target срабатывает тогда, когда хэш URL адреса и идентификатор элемента совпадают.

Вот небольшая  демонстрация того, как это работает.

Эта страница содержит ряд тегов h1, каждый из которых обладает уникальным ID. Вот основная структура документа:

<h1 id="one">Heading One</h1>
<p>Lorem ipsum...</p>

<h1 id="two">Heading Two</h1>
<p>Lorem ipsum...</p>

<h1 id="three">Heading Three</h1>
<p>Lorem ipsum...</p>
<h1 id="four">Heading Four</h1>
<p>Lorem ipsum...</p>

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

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">Four</a></li>
    <li><a href="#five">Five</a></li>
    <li><a href="#six">Six</a></li>
    <li><a href="#seven">Seven</a></li>
</ul>

Использование: target для создания события при нажатии

Теперь пришло время использовать наш псевдокласс :target.  Стиль для элемента :target будет активирован только тогда, будет активна ссылка, на которую нажали.

Например, мы хотим сделать так, чтобы элемент, на который нажали в нашем меню навигации каким-то образом изменился. Это позволит пользователям четко определить раздел, в котом они находятся. Для этого мы будем использовать селектор «h1: target» и  изменим размер шрифта, его цвет и добавим подчеркивание. Смотрите демо здесь .

Добавим анимацию

Давайте оживим наш эффект и добавим немного анимации, например, миленький перехода для изменения цвета. Смотрите, как это работает здесь .

Управление нецелевыми объектами

Скажем, мы хотим  изменить стили абзаца, который идет после выбранного заголовка.

Сделать это очень просто при помощи следующего кода. Смотрите демо здесь.

Создание простого слайд-шоу при помощи CSS

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

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

 

<div id="slideshow">
  <ul>
    <li><a href="#one">One</a><img id="one" src="http://lorempixum.com/400/300/city/5"/></li>
    <li><a href="#two">Two</a> <img id="two" src="http://lorempixum.com/400/300/city/4"/></li>
    <li><a href="#three">Three</a> <img id="three" src="http://lorempixum.com/400/300/city/3"/></li>
    <li><a href="#four">Four</a> <img id="four" src="http://lorempixum.com/400/300/city/2"/></li>
    <li><a href="#five">Five</a> <img id="five" src="http://lorempixum.com/400/300/city/1"/></li>
  </ul>
</div>

Теперь добавим наши стили:

* {
  margin: 0px;
  padding: 0px;
}

#slideshow {
	margin: 50px auto;
	position: relative;
	width: 400px;
}

ul {
  list-style: none;
}

li {
	float: left;
	overflow: hidden;
	margin: 0 20px 0 0;

}

li a {
	color: #222;
	text-decoration: none;
	font: 15px/1 Helvetica, sans-serif;

	-webkit-transition: color 0.5s ease;
	   -moz-transition: color 0.5s ease;
	     -o-transition: color 0.5s ease;
	    -ms-transition: color 0.5s ease;
	        transition: color 0.5s ease;
}

li a:hover {
	color: #50b0df;
}

li img {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: -1;

  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;

}

li img:target {
	z-index: 1;
}
li img:not(:target) {
	opacity: 0;
}

Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.

Далее, установим z-index: -1 для всех изображений, а затем установите z-index: 1 для целевых изображений. Это приведёт к тому, что когда вы нажимаете на элемент списка, изображение изменяется. Чтобы сделать переход более плавным, мы установим значение непрозрачность для других изображений  0.

Смотрите демонстрацию слайд-шоу на чистом CSS здесь.

Кроссбраузерность

Псевдокласс : target  является  селектором CSS третьего уровня , это значит, что он поддерживается в практически любом браузере, за исключением (не за что не догадаетесь )  ... IE. Старый добрый ослик поддерживает CSS3-селекторы только  в 9-ой и 10-ой версиях.

Как и любую другую проблемой  отображения CSS3- селекторов в IE , это довольно легко исправить при помощи Selectivizr.

Благодаря этому плагину и магии вуду, нужные CSS3-селекторы будут поддерживаться даже в IE6.

Заключение

Поначалу использование псевдоклассов может показаться сложным, но зачем вы поймёте, как они могут облегчить работу и сделать сайт более интересным. Псевдоселектор

:target-хороший тому пример. Только убедитесь, что вы не переборщили со стилями.

По материалам статьи designshack

Ещё один интересный пример использования :target смотрите здесь



Комментарии