Псевдоклассы. Изменение состояния элемента.

Псевдлаклассы :hover, :active , :focus и :visited

:hover

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

Например, при наведение наведение на ссылку перекрасим текст в красный и созданим нижние подчеркивание для текста:

a:hover {
  color: red;
  text-decoration: underline;
}

:active

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

Например, перекрасим стиль активной ссылки:

a:active {
  color: green;
}

:visited

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

Например, перекрасим стиль посещенных ссылок:

a:visited {
  color: purple;
}

Управление стилями кнопок с помощью :hover, :active и :focus

Псевдоклассы :hover, :active и :focus часто используют для создания визуальной обратной связи, когда пользователь взаимодействует с кнопкой.

Например:

button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

button:hover {
  background-color: lightblue;
}

button:active {
  background-color: darkblue;
  transform: translateY(2px);
}

button:focus {
  outline: none;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

В примере кнопка меняет цвет и положение при нажатии или наведении на нее курсора. Псевдокласс :focus используется для создания визуализации фокуса при выборе кнопки с помощью клавиатуры.

Псевдлаклассы :checked, :disabled и :invalid

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

Псевдоклассы :checked, :disabled и :invalid используются для создания визуальной обратной связи при взаимодействии пользователя с элементом формы.

Например:

input[type="checkbox"]:checked + label {
  text-decoration: line-through;
}

input:disabled {
  opacity: 0.5;
}

input:invalid {
  border: 2px solid mediumvioletred;
}

• Псевдокласс :checked добавляет декоративное украшение к метке флажка, когда он установлен.

• Псевдокласс :disabled уменьшает непрозрачность элемента формы, когда она отключена.

• Псевдокласс :invalid меняет цвет границы на красный, когда флажок имеет недопустимое значение.

Псевдлаклассы :out-of-rang и :in-range

:out-of-rang

Псевдокласс :out-of-range нужен для выбора элемента формы, который находятся вне определенного диапазона или предела.

Например, если у вас есть поле ввода числа, где разрешено вводить значение только от 1 до 10, вы можете использовать :out-of-range, чтобы применить стиль к значениям вне этого диапазона.

input[type="number"]:out-of-range {
  border: 2px solid tomato;
}

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

:in-range

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

Например, возьмем поле ввода с диапазона от 1 до 10. Мы хотим применить другой стиль фона при условие, что ввденное значение в пределах допустимого диапазона. Для этого используем псевдокласс :in-range:

input[type="range"]:in-range {
  background-color: fuchsia;
}

В этом примере свойство background-color будет применено к этим полям ввода, создавая для пользователя визуальный индикатор того, что вводимые данные действительны.

Псевдлаклассы :link, :visited и :target

Псевдоклассы :link и :visited используются для выбора ссылок в зависимости от их состояния. В частности, псевдокласс :link используется для выбора ссылок, которые еще не были посещены, а псевдокласс :visited используется для выбора ссылок, которые были посещены.

:link

В примере мы меняем цвет текста непосещенных ссылок, чтобы сделать их более заметными.

a:link {
  color: indigo;
}

В примере :link используется для выбора всех ссылок, которые не были посещены.

:visited

Используется для стилизации ссылок, которые уже были посещены.

Например, мы можем изменить цвет посещенных ссылок, чтобы отличить их от непосещенных.

a:visited {
  color: purple;
}

Примичание: visited имеет некоторые ограничения, связанные с вопросами безопасности. Например, мы не можем изменить цвет фона или оформление текста посещенных ссылок.

:target

Используется для выбора активной цели идентификатора фрагмента URL, который представляет собой часть URL, идущую после символа "#".

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

/* стили для всех секциий */
.section {
  padding: 20px;
  background-color: hsla(190, 100%, 26%, 0.75);
}

/* стиль секции, на которую перешели по внутренний ссылке */
.section:target {
  background-color: hsla(190, 100%, 26%, 1);
}

В примере :target используется для выбора секции, id которой соответствует внутреннему урлу ( url адресу). Цвет фона секции будет изменен, что должно выделить ее на фоне остальных секций .