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

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

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

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

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

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

Значения:

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

Значения:

  • :checked - Указывает, что определяются элементы, которые выбраны пользователем.
      Для элементов типа "переключатель" и(или) "флажок".
  • :default - Указывает, что определяются элементы, которые уже выбраны в HTML-коде по умолчанию.
      Для элементов типа "переключатель" и(или) "флажок" с атрибутом CHECKED.
  • :disabled - Указывает, что определяются элементы, значения которых заблокированы для изменения.
      Например элемент тега TEXTAREA с атрибутом DISABLED.
  • :enabled - Указывает, что определяются элементы, значения которых не заблокированы для изменения.
  • :invalid - Указывает, что определяются элементы, значения которых не соответствует смыслу, или типу, или установленному диапазону (от MIN до MAX) этих значений.
      Например если в элементе тега INPUT с атрибутом PATTERN данные, введенные пользователем не соответствуют шаблону, или пользователем занесено не цифровое значение для элемента INPUT TYPE=number.
  • :indeterminate - Указывает, что определяются элементы, которые находятся в неопределенном состоянии.
  • :in-range - Указывает, что определяются элементы, значения которых находятся в пределах установленного диапазона (от MIN до MAX).
  • :read-only - Указывает, что определяются элементы, изменение значения которых, запрещено.
      Например в элементе тега TEXTAREA с атрибутом READONLY.
  • :open - Указывает, что определяются элементы-псевдоокна тега DIALOG, которые открыты.
  • :optional - Указывает, что определяются элементы, значения которых необязательны для формы.
      Например элемент тега INPUT без атрибута REQUIRED.
  • :out-of-range - Указывает, что определяются элементы, значения которых вышли за пределы установленного диапазона (от MIN до MAX).
  • :read-write - Указывает, что определяются элементы, значения которых доступны для изменения.
  • :required - Указывает, что определяются элементы, значения которых обязательны для формы.
      Например элемент тега INPUT с атрибутом REQUIRED.
  • :valid - Указывает, что определяются элементы, формат значений которых соответствует смыслу, или типу, или установленному диапазону (от MIN до MAX) этих значений.


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

<STYLE>
  .inp[NAME="black"]:checked + DIV {content: url("../content/pauk2.jpg") }
  .inp[NAME="white"]:checked + DIV {content: url("../content/pauk1.jpg") }
</STYLE>
......

<INPUT class="inp" TYPE="checkbox" NAME="black">
<DIV>
  Черный паучок
</DIV>
<INPUT class="inp" TYPE="checkbox" NAME="white">
<DIV>
  Белый паучок
</DIV>
Пример селектора псевдокласса элементов интерфейса:checked - выберите "флаг".
Черный паучок
Белый паучок