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

Псевдоклассы С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), он будет подсвечен жёлтым цветом, как показано ниже:

<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: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 селектор

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

Описание

Псевдо-класс :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

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}

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

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

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

<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.

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

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

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

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

http://site.local/#id1

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

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

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

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

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

• Создано 02.09.2014 16:27:23
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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]