Target псевдокласс: Псевдокласс :target | htmlbook.ru – Псевдо-класс :target

Псевдокласс :target | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 1.0+ 3.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис

элемент:target { ... }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>target</title> <style> h3:target { background: #fc0; /* Цвет фона */ padding: 3px; } </style> </head> <body> <ul> <li><a href="#h2">История 1</a></li> <li><a href="#h3">История 2</a></li> </ul> <h3>История 1</h3> <p>История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.</p> <h3>История 2</h3> <p>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p> </body> </html>

В данном примере целевой элемент выделяется цветом фона.

Браузеры

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Псевдокласс :target | CSS | WebReference

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис ?

Селектор:target { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>target</title>
  <style>
   h3:target {
    background: #fc0; /* Цвет фона */
    padding: 3px; 
   }
  </style>
 </head>
 <body>
  <ul>
    <li><a href="#h2">История 1</a></li>
    <li><a href="#h3">История 2</a></li>
  </ul>
  <h3>История 1</h3>
   <p>История о том, как необходимо было сделать могилу, 
   ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <h3>История 2</h3>
   <p>История о том, как возле столовой появились загадочные розовые
   следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

В данном примере целевой элемент выделяется цветом фона.

Примечание

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Псевдоклассы СSS :not() и :target


Сегодня мы рассмотрим менее распространенные псевдоклассы CSS, которые поддерживаются в современных браузерах: child-indexed и typed child-indexed, а также псевдоклассы для элементов ввода input. Псевдоклассы child-indexed и typed child-indexed позволяют выделять элементы по их расположению в дереве документа. Псевдоклассы input определяют поля формы на основе их значений и состояний.

В этом случае идентификатор фрагмента является частью URL, который следует после хеша # (например, #top или #footnote1). Такое часто используется для организации навигации по странице при помощи так называемой «jump-link». С помощью псевдокласса :target можно подсветить фрагмент документа:

<section>
<h3>Comments on this post</h3>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

После нескольких штрихов и работы с CSS получается результат, который приведен ниже:


Каждый comment в коде обозначен идентификатором, который позволяет ссылаться на конкретный фрагмент. Например, <a href="#comment-1146937891">. Всё что остаётся – это стилизовать комментарий, используя псевдокласс CSS child :target:

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107
}

Когда идентификатор фрагмента в URL совпадает с комментарием (например, http://example.com/post/#comment-1146937891), он будет подсвечен жёлтым цветом, как показано ниже:


Псевдокласс CSS :target позволяет создавать комбинации, что открывает пространство для манёвров и позволяет не использовать JavaScript. Стилизуем наш пример с помощью CSS3. Для начала посмотрите на HTML-код:

<div>
<div>
	<a href="#tab1">Tab 1</a>
	<a href="#tab2">Tab 2</a>
	<a href="#tab3">Tab 3</a>
</div>

<ul>
	<li>
		<p>This is tab 1.</p>
	</li>
	<li>
		<p>This is tab 2</p>
	</li>
	<li>
		<p>This is tab 3.</p>
	</li>
</ul>
</div>

Здесь всё просто: три вкладки и контент с привязкой. Добавим CSS:

[id^=tab] {
    position: absolute;
}
[id^=tab]:first-child {
    z-index: 1;
}
[id^=tab]:target {
    z-index: 2;
}

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

В более доступной версии (в том числе и псевдоклассах CSS ссылок) можно использовать JavaScript для переключения атрибутов hidden и aria-hidden=true.

Клик по вкладке обновляет URL с использованием нового идентификатора фрагмента, после чего приводится в действие состояние :target.

Одним из самых многофункциональных считается псевдокласс :not(). Он возвращает все элементы, за исключением тех, которые совпадают с аргументом селектора. Например, p:not(.message) выделяет все элементы p без класса message.

Псевдокласс :not() принимает один аргумент, как и большинство функций в других языках программирования. Любой аргумент, заданный в :not(), должен быть простым селектором, названием класса или ID, другим псевдоклассом. Псевдоклассы не работают так, как составные селекторы типа label.checkbox или сложные селекторы типа p img.

Посмотрите на пример формы, в которой используется текстовые элементы ввода и radio buttons:

<form method="post" action="#">
  <h2>Join the Cool Kids Club</h2>
  <p>
	   <label for="name">Name:</label>
	   <input type="text" name="name" required>
  </p>

  <p>
	  <label for="email">Email:</label>
	  <input type="email" name="email" required>
  </p>
  <fieldset>
	<legend>Receive a digest?</legend>
	<p>
		<input type="radio" name="digest">
		<label for="daily">Daily</label>                
		<input type="radio" name="digest">
		<label for="weekly">Weekly</label>
	</p>
  </fieldset>
  <button type="submit">Buy Tickets!</button>
</form>

В HTML label, ассоциированные с элементами типа radio, имеют класс .label-radio. Можно использовать псевдокласс CSS нажатия :not() для выделения элементов, не имеющих класса label-radio, как это показано на картинке ниже:

label:not(.label-radio) {
  font-weight: bold;
  display:block;   
}


Рассмотрим более сложный пример. Используем стилизацию текстовых полей. Сюда входят элементы ввода number, email и text, а также password и url. Кроме этого мы исключим элементы radio, checkbox и range. Вам наверняка захочется воспользоваться следующим списком селектора:

([type=radio]),
input:not([type=checkbox]),
input:not([type=range]) {
  ...
}

К сожалению, это не поможет, так как каждый новый селектор переписывает предыдущий. Это всё равно, что писать:

input:not([type=radio]){ ... }
input:not([type=checkbox]) { ... }
input:not([type=range]) {... }

Вместо этого, нужно связать псевдоклассы :not() в цепочку, чтобы они отфильтровывали все элементы input:

input:not([type=radio]):not([type=checkbox]):not([type=range]) {
...
}

Приведённая цепочка селекторов также соответствует элементам [type=image], [type=reset], [type=color] и [type=submit]

Использование псевдоклассов и псевдоэлементов CSS без простого селектора эквивалентно его использованию с универсальным селектором. Другими словами, :not([type=radio]) – то же, что и *:not([type=radio]). В данном случае нашему критерию отвечает любой элемент без атрибута type и значения radio, включая html и body. Чтобы предотвратить это, используйте :not() с названием класса, ID или селектор атрибутов в качестве селектора.

В CSS-селекторах Level 4 изменен принцип работы :not(), так что, теперь он принимает в качестве аргумента не только простые селекторы, но и списки. Вместо того чтобы связывать классы, как это делалось раньше, можно указывать аргументы через запятую:

input:not([type=radio], [type=checkbox], [type=range]) {
...
}

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

Данная публикация представляет собой перевод статьи «CSS Pseudo-classes: :not() and :target» , подготовленной дружной командой проекта Интернет-технологии.ру

Использование псевдокласса :target в селекторах - Веб-технологии для разработчиков

Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.

Выбор целевых элементов

Псевдокласс :target используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example содержит идентификатор фрагмента #example. В HTML, идентификаторы определяются значениями атрибутов  id или name, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент "example" в документе.

Пердположим, вы хотите стилизовать любой элемент h3, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:

h3:target { font-weight: bold; }

Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту #example , напишем:

#example:target { border: 1px solid black; }

Отметка всех элементов, как целевых

Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:

:target { color: red; }

Пример

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что  <h2> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.

<h5>...</h5> <p>...</p>
<div>...</div> <a>...</a> <em>...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

Вывод

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

Original Document Information

  • Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
  • Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

Псевдо-класс :target | CSS селектор

Поддержка браузерами

12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

Описание

Псевдо-класс :target выбирает текущий целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы.

Синтаксис


:target { свойства }
Пример:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
  <style>
    .tab div { display: none; }
    .tab div:target { display: block; }
  </style>
</head>
<body>

  <div>
    <a href="#link1">Ссылка 1</a>
    <a href="#link2">Ссылка 2</a>
    <a href="#link3">Ссылка 3</a>

    <div>
      <h4>Содержимое по ссылке 1</h4>
      <p>Hello World!</p>
    </div>

    <div>
      <h4>Содержимое по ссылке 2</h4>
      <p>Привет Мир!!</p>
    </div>

    <div>
      <h4>Содержимое по ссылке 3</h4>
      <p>Ещё увидимся!</p>
    </div>
  </div>

</body>
</html>
Результат данного примера:
Ссылка 1 Ссылка 2 Ссылка 3

Содержимое по ссылке 1

Hello World!

Содержимое по ссылке 2

Привет Мир!!

Содержимое по ссылке 3

Ещё увидимся!

target в CSS. Как это работает?

В Сети можно легко найти множество уроков с применением псевдокласса :target. Однако, не будем следовать чужому коду, а попробуем разобраться в нем и понять, как это работает? Конечно, не обойдется и без примеров

Что такое :target?

В CSS :target это псевдокласс, позволяющий выбрать некоторый целый «кусок» вашего HTML-документа, над которым будет производится некоторое действие. Это может быть абзац текста или заголовок, к примеру.

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

Псевдоклассы:

  • a:link{color:#111}
  • a:hover{color:#222}
  • div:first-child{color:#333}

Псевдоэлементы:
  • p::first-letter{color:#444}
  • p::first-line{color:#555}

Думаю, из синтаксиса ясно, что делает тот или иной псевдокласс или псевдоэлемент. Самый популярный псевдокласс — :hover, с ним сталкиваются все вебмастера, он описывает стили элемента при наведении курсора. target работает аналогично и описывает стили элемента при наступлении определенной ситуации.

Идентификаторы фрагментов

Если кратко — это такая штука, к которой подвязывается наш псевдокласс. Это хэштег со словом или фразой, которая ставится в конце адреса. Выглядит вот таким образом:

Идентификатор фрагмента

Идентификатор фрагмента

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


<a href="#1">Ссылка на первый раздел</a>
<a href="#2">Ссылка на второй раздел</a>

<h2>Первый раздел</h2>
Lorem Ipsum...

<h2>Второй раздел</h2>
Lorem Ipsum...

Это работает на чистом HTML, никаких ухищрений не требуется. Небольшой пример работы идентификаторов.

Обработка клика с помощью :target

Теперь попробуем сделать так, чтобы при клике на нужный раздел из нашего импровизированного меню — менялся стиль заголовка, показывая, какой из абзацев сейчас активен.


h2 {
  font: 30px Arial sans-serif;
}

h2:target {
   font-size: 50px;
   text-decoration: underline;
   color: #37aee4;
}

Код очень простой — при клике заголовок меняет свой размер, цвет и подчеркивается. Можно добавить жизни (Руслан, привет ) и сделать анимацию смены цвета заголовка:



h2 {
 font: 30px Arial 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;
 }


Подсвечивать активный заголовок дело хорошее, но как быть, если нужно изменить оформление текста, идущего за ним? CSS дает нам такую возможность. Выглядит это следующим образом:


h2:target + p {
   background: #eaeaea;
   padding: 10px;
}

В данном случае, плюс означает, что стиль должен быть применен для следующего за заголовком абзаца. Таким образом, при изменении активного заголовка — мы меняем и оформление раздела с текстом, который ему «принадлежит».

Поддержка браузерами

Псевдокласс target относится к третьей редакции CSS и отлично поддерживается всеми браузерами, кроме IE, старше 9 версии Поэтому не стоит его внедрять, если ваша аудитория использует этот браузер. Хотя, выход из положения есть — это Selectvizr, JS библиотека, с помощью которой можно заставить IE работать с CSS3. Просто добавляем скрипт и все, оно работает.

Единственное, если вы не используете у себя JQuery или MooTools — нужно подключить, для работы этого скрипта. На официальном сайте есть таблица, какие библиотеки чего поддерживают. Если будет интересно — почитайте. Это тут.

Посмотреть в работе

Заключение

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

Не переусердствуйте с красотой и поддержкой браузерами и все будет отлично.

Удачного вам дня

Ссылка на источник на английском — тут

Зачем нужен псевдокласс target в CSS3.

Вы здесь: Главная - CSS - CSS3 - Зачем нужен псевдокласс target в CSS3.

Зачем нужен псевдокласс target в CSS3.

В CSS3 появилось много нового, и сегодня мы разберем один из новых псевдоклассов - target.

Target с английского переводится как "цель" и это не просто так. Дело в том, что данный псевдокласс применяет какие-то стили к элементу, на который ссылаются. Объяснять это просто так нет смысла, лучше посмотрим сразу на пример.

К примеру, у нас есть такой HTML код:

<div>Какой-то текст</div>

Теперь мы можем сослаться на данный элемент из строки запроса

http://site.local/#id1

Таким образом мы сможем перейти к данному элементу.

Теперь рассмотрим пример с псевдоклассом target.

<a href="#id1">Ссылка</a>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dignissimos odio eius, delectus autem facilis sunt vero ex, eum tempore excepturi harum voluptatem corporis modi, ducimus quam ab. Ipsa, officia.</p>
</div>
И пропишем для данного элемента стили div p:target {   color: green; }

Теперь, при клике по ссылке, текст в параграфе станет зеленого цвета, т.к. вы начнете на него ссылаться.

Итак, вот такой простой псевдокласс target в CSS3, однако, он позволяет делать очень крутые вещи. Одну из таких мы разберем в следующей статье.

Спасибо за внимание и удачи!

  • Зачем нужен псевдокласс target в CSS3. Создано 02.09.2014 16:27:23
  • Зачем нужен псевдокласс target в CSS3. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *