Специальные селекторы: Псевдоклассы активации.

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

Формат записи в коде CSS специального селектора псевдокласса активации:

  • Основной селекторПсевдокласс активации

Значения формата записи:

  Основной селектор - Устанавливает элементы тегов, к которым применяются псевдоклассы активации для определения конечных элементов тегов.

Значения:

  Псевдокласс активации - Устанавливает условие для определения конечных элементов тегов из элементов тегов установленных основным селектором.
  В отличии от структурного псевдокласса пишется сразу (без пробела) за основным селектором.

Значения:

  • :active - Определяются элементы тегов, контент которых активирован пользователем.
  • :drag - Определяются элементы тегов, контент которых активирован пользователем с помощью технологии "перетаскивания".
  • :empty - Определяются "пустые" элементы тегов.
      "Пустой" элемент не содержит собственного контента(даже пробелов) и "дочерних" элементов.
      "Пустые" элементы в HTML-коде создают полезные возможности для скриптов. Скрипт, к примеру, может активировать стиль псевдокласса :empty, сделав его элемент пустым, или деактивировать, заполнив его.
  • :first - Определяются элементы тегов, контент которых печатается на первом листе при печати документа.
      Псевдоклас :first может использоваться только в правиле созданном ключевым словом @page.
  • :focus - Определяются элементы тегов, получившие фокус ввода.
  • :full-screen | :fullscreen - Определяются элементы тегов, поля которых находятся в режиме полноэкранного просмотра.
      Поле элемента может получить полноэкранный режим скриптом с помощью метода requestFullscreen объекта HTMLElement.
  • :full-screen-ancestor - Определяются"родительские" элементы элементов тегов, поля которых находятся в режиме полноэкранного просмотра.
      Поле элемента может получить полноэкранный режим скриптом с помощью метода requestFullscreen объекта HTMLElement.
  • :host[(Селектор)] - Указывает, что определяется хост-элемент теневого дерева.
      Псевдокласс :host применяется к хост-элементу теневого дерева из теневого дерева, однако стили установленные им имеют более низкий приоритет в сравнении со стилями установленными этому элементу извне.
      Для смены приоритета необходимо применять ключевое слово !important.

      В свою очередь стили установленные другими селекторами теневого дерева имеют приоритет как над стилями :host, так и над стилями унаследованными от хост-элемента теневого дерева.

      Селектор - CSS-селектор, который задаёт условие определяющее удовлетворяет или нет хост теневого дерева для применения к нему стилей заданных псевдоклассом :host (например это может быть идентификатор этого элемента тега).
      Стили установленные псевдоклассом :host наследуются как элементами теневого дерева, так и элементами, которые были динамически добавлены в теневое дерево из его хост-элемента.
      "Дочерними" для хост-элемента теневого дерева элементами тега SLOT и их "дочерними" элементами стили, установленные псевдоклассом :host, не наследуются.
  • :hover - Определяются элементы тегов, в поле которых установлен курсор мышки.
  • :left - Определяются элементы тегов, контент которых печатается на левой стороне листа при печати документа.
      Псевдоклас :left может использоваться только в правиле созданном ключевым словом @page.
  • :link - Определяются элементы тегов, контент которых может быть активирован пользователем, но еще не был активирован.
      Например "непосещенная" гиперссылка.
  • :right - Определяются элементы тегов, контент которых печатается на правой стороне листа при печати документа.
      Псевдоклас :right может использоваться только в правиле созданном ключевым словом @page.
  • :target - Определяются элементы тегов, на которые последний раз произошел переход на Web-странице по гиперссылке, включающей идентификатор этого тега.
  • :visited - Определяются элементы тегов, контент которых уже был активирован пользователем.
      Например "посещенная" гиперссылка.
  • :unresolved - Определяются элементы тегов, которые могут быть зарегистрированы скриптом с помощью метода registerElement объекта HTMLDocument, но на текущий момент ещё не зарегистрированы.
      В именах тегов, которые создали такие элементы в HTML-коде, должен присутствовать дефис.


В примере псевдоклассом активации определяется нажатая кнопка, для которой комбинатором пробел определяется элемент вложенного тега для привязки стиля content: url(Ссылка):

<STYLE>
  .button:active DIV {content: url(../content/ROJA.jpg) }
</STYLE>
.........

<BUTTON class="button" TYPE="button" VALUE="ПУСК">
  <DIV>
    Не пугайтесь!
  </DIV>
</BUTTON>
Пример селектора псевдокласса активации:active - нажмите "кнопку" (Chrome).